/* ==========================================================================
   DiviFácil — telas de acesso (login, recuperar e redefinir senha)
   Layout dividido: imagem/slogan à esquerda, cartão do formulário à direita.
   ========================================================================== */

body.auth { min-height: 100vh; min-height: 100dvh; background: var(--ink-50); }

.auth-layout {
  display: grid; grid-template-columns: 58% 42%;
  min-height: 100vh; min-height: 100dvh;
}

/* ---------- Lado esquerdo: imagem + slogan ---------- */
.auth-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 56px 34px; color: #fff;
  background-color: #131b2e;
  background-image:
    radial-gradient(640px 420px at 0% 100%, rgba(255, 138, 71, .24), transparent 62%),
    linear-gradient(180deg, rgba(19, 27, 46, .86) 0%, rgba(19, 27, 46, .93) 100%),
    url('../img/fundo.webp');
  background-size: cover; background-position: center;
}

.auth-voltar {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .85);
  transition: color .15s, transform .15s;
}
.auth-voltar:hover { color: #fff; text-decoration: none; transform: translateX(-2px); }
.auth-voltar .ico { width: 16px; height: 16px; }

.auth-hero__conteudo { max-width: 540px; margin-block: auto; padding-block: 28px; }
.auth-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(32px, 3.5vw, 48px); font-weight: 800; line-height: 1.12; letter-spacing: -.025em;
}
.auth-hero h1 em { font-style: normal; color: var(--brand-500); }
.auth-hero p { margin: 0; max-width: 450px; font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .78); }
.auth-hero__rodape { font-size: 12px; color: rgba(148, 163, 184, .95); }

/* ---------- Lado direito: cartão ---------- */
.auth-lado {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px; background: var(--ink-50);
}

.auth-card {
  width: 100%; max-width: 410px; padding: 38px 38px 32px;
  background: #fff; border-radius: 18px;
  box-shadow: 0 22px 48px -22px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .05);
}
.auth-card__logo { display: block; width: 136px; height: auto; margin: 0 auto 12px; }
.auth-card__sub { margin: 0 0 26px; text-align: center; font-size: 13px; line-height: 1.55; color: var(--ink-500); }
.auth-card__titulo { margin: 0 0 6px; text-align: center; font-size: 20px; font-weight: 800; letter-spacing: -.015em; color: var(--ink-900); }

.auth-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 20px; }
.auth-link { font-size: 12.5px; font-weight: 600; color: var(--brand-700); }
.auth-rodape-card { margin: 22px 0 0; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--ink-500); }
.auth-rodape-card a { font-weight: 700; }
.auth-voltar-login { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; font-size: 13px; font-weight: 600; }
.auth-voltar-login .ico { width: 15px; height: 15px; }

.auth-copy-mobile { display: none; margin: 18px 0 0; font-size: 12px; color: var(--ink-400); text-align: center; }

/* Lista de requisitos da senha */
.reqs { display: grid; gap: 7px; margin: -4px 0 20px; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-500); }
.reqs li { display: flex; align-items: center; gap: 8px; transition: color .2s; }
.reqs .ico { width: 15px; height: 15px; padding: 2px; border-radius: 50%; background: var(--ink-200); color: #fff; stroke-width: 3.2; transition: background-color .2s; }
.reqs li.ok { color: var(--ok); font-weight: 600; }
.reqs li.ok .ico { background: var(--ok); }

/* Estado de link inválido */
.auth-estado { text-align: center; }
.auth-estado__icone {
  width: 68px; height: 68px; margin: 0 auto 18px; display: grid; place-items: center;
  border-radius: 50%; background: var(--aviso-bg); color: var(--aviso); box-shadow: 0 0 0 9px rgba(217, 119, 6, .09);
}
.auth-estado__icone .ico { width: 32px; height: 32px; }
.auth-estado p { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--ink-500); }

/* ---------- Cadastro (/contratar) ---------- */
.auth-card--larga { max-width: 450px; }
.auth-card--larga .auth-card__sub { margin-bottom: 20px; }
.auth-card--larga .campo { margin-bottom: 14px; }

/* Campo-armadilha contra robôs: fora da tela (pessoas não veem nem preenchem). Sem style="" por causa do CSP. */
.campo-armadilha { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Endereço com o sufixo ".divifacil.com.br" colado ao campo */
/* width:0 + flex-grow: o campo ocupa o que sobrar e NUNCA impõe largura mínima ao cartão (senão a página estoura no celular) */
.campo__caixa--sufixo .campo__input { flex: 1 1 0; width: 0; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.campo__sufixo {
  display: flex; align-items: center; flex: none; height: 44px; padding: 0 12px;
  font-size: 13px; font-weight: 600; color: var(--ink-500); white-space: nowrap;
  background: var(--ink-200); border: 1px solid var(--ink-200); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: border-color .2s, background-color .2s;
}
.campo__caixa--sufixo:focus-within .campo__sufixo { border-color: var(--brand-500); background: var(--brand-100); }
.campo__input[aria-invalid="true"] ~ .campo__sufixo { border-color: var(--erro); }

/* Linha de ajuda sob o campo (endereço livre / em uso / verificando) */
.campo__ajuda { display: flex; align-items: flex-start; gap: 6px; margin: 7px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-500); }
.campo__ajuda-icones { display: contents; }
.campo__ajuda .ico { display: none; width: 15px; height: 15px; margin-top: 1px; }
.campo__ajuda.is-ok { color: var(--ok); font-weight: 600; }
.campo__ajuda.is-erro { color: var(--erro); font-weight: 600; }
.campo__ajuda.is-ok .ico--ok, .campo__ajuda.is-erro .ico--erro { display: inline-block; }
.campo__ajuda.is-carregando .ico--carregando { display: inline-block; animation: girar .8s linear infinite; }

/* Aceite dos termos */
.campo--termos { margin-bottom: 20px; }
.check--termos { align-items: flex-start; font-size: 12.5px; line-height: 1.5; }
.check--termos input { flex: none; margin-top: 1px; }
.check--termos a { font-weight: 700; }

/* ---------- Celular / tablet ---------- */
@media (max-width: 980px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); }     /* a coluna nunca fica maior que a tela */
  .auth-hero { padding: 26px 24px 84px; }
  .auth-hero__conteudo { margin: 22px 0 0; padding-block: 0; }
  .auth-hero h1 { margin: 0; font-size: 27px; }
  .auth-hero p, .auth-hero__rodape { display: none; }
  .auth-lado { position: relative; z-index: 1; justify-content: flex-start; margin-top: -56px; padding: 0 16px 28px; }
  .auth-card { padding: 30px 24px 26px; }
  .auth-copy-mobile { display: block; }
}
/* Telas bem estreitas: o sufixo sai (a linha de ajuda já mostra o endereço completo) e o campo ganha espaço */
@media (max-width: 380px) {
  .campo__sufixo { display: none; }
  .campo__caixa--sufixo .campo__input { border-radius: var(--radius-sm); }
}