/* PotyApp — Login / Cadastro (telas full-orange)
 * Reproduz fielmente o design do Figma:
 *  - fundo laranja #f07000
 *  - logo centralizada no topo
 *  - titulo em cursiva branca
 *  - inputs BRANCOS com placeholder cinza-claro
 *  - botao "Entrar" sem caixa (so texto branco)
 *  - checkbox "Mim mantenha conectado"
 *  - imagem de camarao + assinatura na base
 */

.auth-screen {
  min-height: 100vh;
  background: var(--c-primaria);
  color: var(--c-texto-claro);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 0;
  position: relative;
  /* Garante que cobre a tela toda mesmo se conteudo for menor */
  min-height: 100dvh;
  padding-bottom: 0;
}

/* O fundo laranja da tela de login vem do .auth-screen acima (min-height:100dvh).
 * NÃO pintar html/body aqui: esta regra é global e, por vir depois de styles-new.css,
 * deixava o fundo laranja em TODAS as telas internas (ciclos, transferências, resultados).
 * Quem quiser o fundo da página usa --c-fundo (cinza #f2f2f2), definido em styles-new.css. */

.auth-screen .logo-wrap {
  width: 220px; height: 220px;
  margin: 8px auto 8px;
  display: grid; place-items: center;
  overflow: visible;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}
.auth-screen .logo-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

.auth-screen h1 {
  font-family: 'Brush Script MT', 'Lucida Handwriting', cursive;
  font-style: italic;
  font-size: 38px;
  font-weight: 400;
  margin: 8px 0 28px;
  text-align: center;
  color: var(--c-texto-claro);
  letter-spacing: 1px;
}

/* Inputs brancos com placeholder cinza */
.auth-screen .auth-field {
  width: 100%;
  max-width: 320px;
  margin-bottom: 14px;
}
.auth-screen .auth-field input {
  width: 100%;
  background: var(--c-texto-claro);
  color: var(--c-texto);
  border: none;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 16px;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  text-align: center;
}
.auth-screen .auth-field input::placeholder {
  color: #d8a888;
  font-weight: 500;
}

/* Botao "Entrar" so com texto */
.auth-screen .auth-submit {
  background: none;
  border: none;
  color: var(--c-texto-claro);
  font-size: 20px;
  font-weight: 600;
  padding: 14px 24px;
  margin: 18px 0 8px;
  cursor: pointer;
  letter-spacing: 0.5px;
}
.auth-screen .auth-submit:hover { opacity: 0.85; }

/* Checkbox custom */
.auth-screen .check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin: 8px 0 24px;
  color: var(--c-texto-claro);
  cursor: pointer;
}
.auth-screen .check-row input { display: none; }
.auth-screen .check-row .checkmark {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-secundaria);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.auth-screen .check-row .checkmark::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-texto-claro);
  opacity: 0;
}
.auth-screen .check-row input:checked + .checkmark::after { opacity: 1; }

/* Links inferiores */
.auth-screen .links {
  margin-top: auto;
  margin-bottom: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
}
.auth-screen .links a {
  color: var(--c-texto-claro);
  display: block;
  opacity: 0.85;
}

/* Frase marketing (cadastro) */
.auth-screen .marketing {
  margin: 20px 0 12px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-texto-claro);
  max-width: 280px;
  opacity: 0.95;
}

/* Imagem de camarao + assinatura na base (REMOVIDA — substituida por logos) */
.auth-screen .footer-art { display: none !important; }

/* Rodape com logos + copyright das duas empresas */
.auth-screen .footer-brands {
  width: 100%;
  margin-top: auto;
  padding: 16px 12px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.auth-screen .footer-brands .brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease;
  border-radius: 4px;
}
.auth-screen .footer-brands .brand-link:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.auth-screen .footer-brands .brand-link:active {
  transform: translateY(0);
}
.auth-screen .footer-brands img {
  height: 56px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
  opacity: 0.95;
}
/* OkenaTech vem com padding enorme (200x200 com wordmark no centro) — aumentar para destacar */
.auth-screen .footer-brands img[alt="OkenaTech"] {
  height: 96px;
  margin-right: 6px;
}
.auth-screen .copyright {
  width: 100%;
  padding: 8px 16px 14px;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.auth-screen .copyright strong { font-weight: 600; }

/* Msg de erro/ok */
.auth-screen .msg {
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  min-height: 18px;
  color: #ffe0b0;
}
.auth-screen .msg.error { color: #ffd0d0; }
.auth-screen .msg.ok    { color: #d0ffd0; }

/* Demo link discreto embaixo */
.auth-screen .demo-link {
  display: block;
  text-align: center;
  margin: 10px 0 4px;
  color: var(--c-texto-claro);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 6px 16px;
  border-radius: 999px;
  width: auto;
}
.auth-screen .demo-link:hover { background: rgba(255, 255, 255, 0.2); }

/* ===== WIZARD DE CADASTRO (4 passos) ===== */
.auth-screen.cadastro-wizard h1 {
  margin: 8px 0 4px;        /* tira o espaço vago embaixo do titulo */
}
.auth-screen.cadastro-wizard .wizard-content {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.auth-screen.cadastro-wizard .wizard-content h2 {
  margin: 10px 0 12px;      /* afasta o titulo do step dos inputs */
  font-size: 18px;
  color: var(--c-texto-claro);
  font-weight: 500;
}
/* todos os auth-field do wizard com mesma largura maxima */
.auth-screen.cadastro-wizard .auth-field {
  max-width: 360px;
  margin-bottom: 12px;
}
/* linha com 2 campos lado a lado (ex: cidade + UF) */
.auth-screen.cadastro-wizard .auth-field-row {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin-bottom: 12px;
}
.auth-screen.cadastro-wizard .auth-field-row .auth-field {
  margin-bottom: 0;          /* a row ja controla o gap */
}
/* CEP em destaque no topo (linha inteira) */
.auth-screen.cadastro-wizard .cep-row {
  width: 100%;
  max-width: 360px;
}
.auth-screen.cadastro-wizard .cep-row .auth-field,
.auth-screen.cadastro-wizard .cep-row {
  margin-bottom: 12px;
}
/* progress dots (1 2 3 4) */
.auth-screen.cadastro-wizard .wizard-progress {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 6px 0 14px;
}
.auth-screen.cadastro-wizard .wizard-step-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: var(--c-texto-claro);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.auth-screen.cadastro-wizard .wizard-step-dot.active {
  background: var(--c-texto-claro);
  color: var(--c-primaria);
  border-color: var(--c-texto-claro);
}
.auth-screen.cadastro-wizard .wizard-step-dot.done {
  background: rgba(255, 255, 255, 0.55);
  color: var(--c-primaria);
}
/* botoes Voltar / Proximo do footer do wizard */
.auth-screen.cadastro-wizard .wizard-footer {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}
.auth-screen.cadastro-wizard .wizard-back { opacity: 0.85; }