/* =========================================================
   Alericos · Telas de autenticação no site (al-auth)
   /login/ (entrar, esqueci, redefinir, já conectado) e /registrar/.

   O PADRÃO É O DO APP (pedido do RT, 25/09/2026: "fazer a página de cadastro e
   login no site ficar idênticos ao app [...] o mais importante é o estilo css").
   As medidas vêm das telas nativas — alericos-mobile/www/css/app.css,
   login.css e register.css — e os valores, dos tokens do tema:
     fundo #0A1628 sem cartão · rótulo 0,85rem/500 cinza · campo de 48px, fundo
     #0F1D2B, borda 1px #2C3E50, raio 8px, foco pela borda azul · botão de 48px,
     raio 12px · faixa de erro #E76F51 · logo e tagline no topo do entrar.

   O SITE MANTÉM OS CAMPOS E O COMPORTAMENTO (país/DDI, aviso de Termos, medidor
   de senha, "Lembrar de mim", nonce, redirect_to). Só o visual muda: antes eram
   "ilhas claras" — cartão branco com tokens próprios (erro #DC3545, borda
   #DEE2E6) sobre o tema escuro, cada tela com o seu <style> embutido.

   Escopo pelos contêineres dos shortcodes: nada daqui vaza para o resto do site.
   Carregado no <head> quando a página tem o shortcode (ver shortcode-login.php).
   ========================================================= */

.alx-login-container,
.alx-registro-container,
.alx-registro-logged {
  --auth-bg-input: var(--alx-bg-input, #0F1D2B);
  --auth-border: var(--alx-border, #2C3E50);
  --auth-border-focus: var(--alx-border-focus, rgba(33, 158, 188, 0.5));
  --auth-text: var(--alx-text, #E9ECEF);
  --auth-text-2: var(--alx-text-secondary, #ADB5BD);
  --auth-primary: var(--alx-primary, #219EBC);
  --auth-danger: var(--alx-danger, #E76F51);
  --auth-success: var(--alx-success, #2A9D8F);
  --auth-warning: var(--alx-warning, #F4A261);
  --auth-radius: var(--alx-radius, 12px);
  --auth-radius-sm: var(--alx-radius-sm, 8px);
}

/* ----------------------------------------------------------- moldura --- */
/* O app não tem cartão: a tela inteira é o fundo escuro, com 24px de respiro. */
.alx-login-container,
.alx-registro-container {
  display: flex;
  justify-content: center;
  padding: 40px 24px 48px;
  color: var(--auth-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark;
}
.alx-login-container *,
.alx-registro-container * { box-sizing: border-box; }

.alx-login-card,
.alx-registro-card {
  width: 100%;
  max-width: 420px;
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
}

/* ----------------------------------------------------------- topo --- */
/* Entrar: o logo e a tagline do app (login.css: .login-header). */
.alx-login-header { text-align: center; margin-bottom: 40px; }
.alx-login-logo {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto 12px;
}
.alx-login-tagline { margin: 0; font-size: 0.85rem; color: var(--auth-text-2); }

/* As outras telas: título e subtítulo como o cabeçalho do cadastro do app
   (register.css: .register-header). */
.alx-login-title,
.alx-registro-title {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--auth-text);
}
.alx-login-subtitle,
.alx-registro-subtitle { margin: 0; font-size: 0.85rem; color: var(--auth-text-2); }
.alx-registro-header { text-align: center; margin-bottom: 32px; }

/* Título só para leitor de tela (o entrar mostra o logo no lugar dele). */
.alx-auth-sr {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ----------------------------------------------------------- faixas --- */
/* login.css: .login-error-banner — sem ícone, só o texto. */
.alx-login-alert,
.alx-registro-alert {
  display: block;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: var(--auth-radius-sm);
  font-size: 0.85rem;
  line-height: 1.45;
}
.alx-login-alert-error,
.alx-registro-alert-error {
  background: rgba(231, 111, 81, 0.1);
  border: 1px solid rgba(231, 111, 81, 0.3);
  color: var(--auth-danger);
}
.alx-login-alert-success,
.alx-registro-alert-success {
  background: rgba(42, 157, 143, 0.1);
  border: 1px solid rgba(42, 157, 143, 0.3);
  color: var(--auth-success);
}
/* O "!" e o "✓" ficam fora — o do cadastro é criado pelo JS dele. */
.alx-login-alert-icon,
.alx-registro-alert-icon { display: none !important; }

/* ----------------------------------------------------------- campos --- */
.alx-login-field,
.alx-registro-field { margin-bottom: 16px; }

.alx-login-label,
.alx-registro-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--auth-text-2);
}

.alx-login-input-wrapper,
.alx-registro-input-wrapper { position: relative; display: block; }

.alx-login-container .alx-login-input,
.alx-registro-container .alx-registro-input {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 14px 16px;
  background: var(--auth-bg-input);
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius-sm);
  box-shadow: none;
  color: var(--auth-text);
  font-size: 1rem;
  line-height: normal;   /* a altura sai 48px, a do app (padding 14 + borda 1) */
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.alx-login-container .alx-login-input:focus,
.alx-registro-container .alx-registro-input:focus {
  border-color: var(--auth-border-focus);
  box-shadow: none;
}
.alx-login-container .alx-login-input::placeholder,
.alx-registro-container .alx-registro-input::placeholder {
  color: rgba(142, 202, 230, 0.65);
  opacity: 1;
}
/* O autopreenchimento do navegador pinta o campo de claro, e no fundo escuro o
   campo salvo destoa do resto. A sombra interna cobre a cor dele. */
.alx-login-container .alx-login-input:-webkit-autofill,
.alx-registro-container .alx-registro-input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0 1000px var(--auth-bg-input);
  -webkit-text-fill-color: var(--auth-text);
  caret-color: var(--auth-text);
}
/* O seletor nativo vira o AlxSelect (alx-select.js), que copia deste campo a
   borda, o fundo e a fonte — por isso basta desenhar o <select>. */
.alx-registro-container select.alx-registro-input {
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, #8ECAE6 50%),
                    linear-gradient(135deg, #8ECAE6 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.alx-registro-container input[type="date"].alx-registro-input { min-height: 48px; }

/* Senha com o olho à direita (app: .input-toggle). */
.alx-login-container .alx-login-input[type="password"],
.alx-login-container #alx_login_pass,
.alx-registro-container #alx_senha,
.alx-registro-container #alx_senha_confirma { padding-right: 48px; }

.alx-login-toggle-pass,
.alx-registro-toggle-pass {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--auth-radius-sm);
  color: var(--auth-text-2);
  cursor: pointer;
}
.alx-login-toggle-pass:hover,
.alx-registro-toggle-pass:hover { color: var(--auth-text); }

/* @ do nome de usuário, dentro do campo. */
.alx-registro-input-prefix {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--auth-text-2);
  font-size: 1rem;
  pointer-events: none;
}
.alx-registro-container .alx-registro-input.alx-registro-input-prefixed { padding-left: 34px; }

.alx-registro-hint {
  display: block;
  margin: 6px 2px 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--auth-text-2);
}

/* Conferência e medidor, estados do JS do cadastro. */
.alx-registro-container .alx-registro-input.alx-input-error { border-color: var(--auth-danger); }
.alx-registro-container .alx-registro-input.alx-input-success { border-color: var(--auth-success); }

.alx-registro-password-strength { display: flex; gap: 4px; height: 4px; margin-top: 8px; }
/* HTU.3 / TD-11: o medidor só aparece com a senha digitada. O JS do cadastro insere as
   três barras já no carregamento (para o estado pintá-las), então o `:empty` que estava
   aqui nunca valia e as três barras cinza ficavam sob o campo vazio. O que diz "tem
   senha" é a classe de força, que o JS tira quando o campo esvazia. */
.alx-registro-password-strength:not(.strength-weak):not(.strength-medium):not(.strength-strong) { display: none; }
.alx-registro-password-strength .strength-bar {
  flex: 1;
  height: 100%;
  background: var(--auth-border);
  border-radius: 2px;
  transition: background 0.2s ease;
}
.alx-registro-password-strength.strength-weak .strength-bar:nth-child(1) { background: var(--auth-danger); }
.alx-registro-password-strength.strength-medium .strength-bar:nth-child(-n+2) { background: var(--auth-warning); }
.alx-registro-password-strength.strength-strong .strength-bar { background: var(--auth-success); }

.alx-registro-match-indicator { display: block; min-height: 1rem; margin-top: 6px; font-size: 0.75rem; }
.alx-registro-match-indicator.match-ok { color: var(--auth-success); }
.alx-registro-match-indicator.match-error { color: var(--auth-danger); }

/* Nome e sobrenome lado a lado, como no app (register.css: .register-row). */
.alx-registro-row { display: flex; gap: 12px; }
.alx-registro-row > .alx-registro-field { flex: 1 1 0; min-width: 0; }

/* ------------------------------------------------ lembrar e esqueci --- */
.alx-login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 8px 0 24px;
}
.alx-login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--auth-text-2);
  cursor: pointer;
}
.alx-login-remember input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
/* A caixa desenhada segue o checkbox do site (alx-fields.css). */
.alx-login-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: rgba(33, 158, 188, 0.12);
  border: 1.5px solid rgba(142, 202, 230, 0.55);
  border-radius: 4px;
  transition: all 0.2s ease;
}
.alx-login-remember input:checked + .alx-login-checkbox {
  background: var(--auth-primary);
  border-color: var(--auth-primary);
}
.alx-login-remember input:checked + .alx-login-checkbox::after {
  content: '';
  width: 5px;
  height: 9px;
  margin-bottom: 2px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.alx-login-remember input:focus-visible + .alx-login-checkbox { border-color: var(--auth-primary); }

/* login.css: .login-forgot a */
.alx-login-container a.alx-login-forgot {
  color: var(--auth-primary);
  font-size: 0.85rem;
  text-decoration: none;
}
.alx-login-container a.alx-login-forgot:hover { text-decoration: underline; }

/* ----------------------------------------------------------- botões --- */
/* app.css: .btn.btn-primary.btn-block */
.alx-login-container .alx-login-submit,
.alx-registro-container .alx-registro-submit,
.alx-login-container .alx-btn-primary,
.alx-registro-logged .alx-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 14px 24px;
  background: var(--auth-primary);
  border: 0;
  border-radius: var(--auth-radius);
  box-shadow: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.alx-login-container .alx-login-submit:hover,
.alx-registro-container .alx-registro-submit:hover,
.alx-login-container .alx-btn-primary:hover,
.alx-registro-logged .alx-btn-primary:hover { background: #1a7e96; color: #fff; text-decoration: none; }
.alx-login-container .alx-login-submit:active,
.alx-registro-container .alx-registro-submit:active,
.alx-login-container .alx-btn-primary:active,
.alx-registro-logged .alx-btn-primary:active { transform: scale(0.97); }
.alx-login-container .alx-login-submit:disabled,
.alx-registro-container .alx-registro-submit:disabled {
  background: var(--auth-text-2);
  cursor: not-allowed;
  transform: none;
}
/* app.css: .btn.btn-secondary */
.alx-login-container .alx-btn-outline,
.alx-registro-container .alx-btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 14px 24px;
  background: transparent;
  border: 1px solid var(--auth-border);
  border-radius: var(--auth-radius);
  color: var(--auth-primary);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}
.alx-login-container .alx-btn-outline:hover,
.alx-registro-container .alx-btn-outline:hover { border-color: var(--auth-danger); color: var(--auth-danger); text-decoration: none; }

.alx-spinner { animation: alx-auth-gira 0.8s linear infinite; }
@keyframes alx-auth-gira { to { transform: rotate(360deg); } }

/* ------------------------------------------------------ rodapés --- */
/* login.css: .login-register · register.css: .register-login */
.alx-login-footer,
.alx-registro-footer {
  margin-top: 24px;
  padding: 0;
  border: 0;
  text-align: center;
}
.alx-login-footer p,
.alx-registro-footer p { margin: 0; font-size: 0.9rem; color: var(--auth-text-2); }
.alx-login-footer a,
.alx-registro-footer a { color: var(--auth-primary); font-weight: 600; text-decoration: none; }
.alx-login-footer a:hover,
.alx-registro-footer a:hover { text-decoration: underline; }

.alx-registro-terms {
  margin: 16px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--auth-text-2);
  text-align: center;
}
.alx-registro-terms a { color: var(--auth-primary); text-decoration: none; }
.alx-registro-terms a:hover { text-decoration: underline; }

/* "← Voltar ao login" do esqueci e do redefinir (register.css: .register-back). */
.alx-auth-voltar { margin-top: 20px; text-align: center; }
.alx-auth-voltar a { color: var(--auth-text-2); font-size: 0.85rem; text-decoration: none; }
.alx-auth-voltar a:hover { color: var(--auth-primary); }

/* ------------------------------------- confira o seu e-mail (Z-S.6b) --- */
/* As telas do cadastro que não são o formulário: o painel depois de "Criar Conta", a página do
   link do e-mail e o que vem depois dela. Título, um parágrafo e os botões empilhados, como o
   "já conectado". */
.alx-registro-estado .alx-registro-header { margin-bottom: 20px; }
.alx-registro-estado-texto {
  margin: 0 0 24px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--auth-text-2);
  text-align: center;
  overflow-wrap: anywhere;
}
.alx-registro-estado-acoes { display: flex; flex-direction: column; gap: 12px; }
.alx-registro-estado-acoes form { margin: 0; }
/* O contorno do entrar herda a altura de linha do tema (56px no cadastro); aqui, a do botão cheio. */
.alx-registro-container .alx-btn-outline { line-height: 1.2; }

/* ------------------------------ confirmar pelo WhatsApp (AUTH.10) --- */
/* O mesmo painel, com o número e o código por escrito abaixo do botão e a linha do acompanhamento
   ("Esperando a sua mensagem chegar…"). O «Não uso WhatsApp» é um link discreto, não um botão. */
.alx-registro-wa .alx-registro-hint { margin: 0; text-align: center; overflow-wrap: anywhere; }
.alx-registro-wa .alx-registro-hint:empty { display: none; }
.alx-registro-container .alx-registro-link-discreto {
  background: none;
  border: 0;
  padding: 4px;
  color: var(--auth-text-2);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}
.alx-registro-container .alx-registro-link-discreto:hover { color: var(--auth-primary); }

/* --------------------------------------------------- já conectado --- */
.alx-login-logged,
.alx-registro-logged { text-align: center; }
.alx-registro-logged { max-width: 420px; margin: 0 auto; padding: 40px 24px 48px; }
.alx-login-logged-avatar {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border: 3px solid var(--auth-primary);
  border-radius: 50%;
  object-fit: cover;
}
.alx-login-logged p,
.alx-registro-logged p { margin: 0 0 24px; font-size: 1.1rem; color: var(--auth-text); }
.alx-login-logged p strong,
.alx-registro-logged p strong { color: var(--auth-text); font-weight: 700; }
.alx-login-logged-actions { display: flex; flex-direction: column; gap: 12px; }

/* HTU.3 / TD-10: no celular estreito o Nome e o Sobrenome lado a lado ficam com
   ~112px de texto por campo (360px de tela) e o placeholder "Seu sobrenome" pede
   113px: a última letra era cortada. Abaixo de 400px o recuo lateral dos dois
   campos da linha cai de 16 para 12px (+8px de texto); o resto dos campos não muda. */
@media (max-width: 400px) {
  .alx-registro-row .alx-registro-input {
    padding-left: 12px;
    padding-right: 12px;
  }
}