/* AUTH FLOW ONLY
   Depende de core.css (tokens, reset, tipografia)
   Não misture regras de dashboard aqui.  */

/* Ritmo visual unificado */
:root { --control-h: 56px; }

/* "Passarela": composição vertical mais alta/respirável (somente telas de auth com card) */
.auth-body.auth-body--card{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 14px;
}

/* Páginas públicas longas (ex.: /privacidade/) não podem ser centralizadas verticalmente */
.auth-body.auth-body--doc{
  min-height:100vh;
  display:block;
  padding:24px 14px;
}
.auth-body.auth-body--doc .card{
  margin:0 auto;
}

/* Admin login (Django admin) reusa auth.css mas não usa base_auth.html */
body.login.crontex-admin{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 14px;
}

/* Cartão de autenticação */
.auth-card{
  /* Importante: `vw` ignora padding do body e pode causar overflow/clipping em telas pequenas.
     Use o container (100%) como limite real. */
  width:min(380px, 100%);
  margin:0;
  background:#fff;
  border-radius:var(--radius);
  padding:76px 24px 78px; /* +~17% altura visual (incremental) */
  box-shadow:var(--shadow);
}

/* Branding visual (sem texto) */
.logo{ display:block; margin:8px auto 30px; width:148px; max-width:56% }

/* Inputs */
.input{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--c-line); border-radius:14px;
  padding:0 14px; background:#fff; height:var(--control-h);
}
.auth-card .input{ width:100%; }
.input.has-pw-toggle{
  position:relative;
}
.input input{
  border:none;
  outline:0;
  flex:1;
  min-width:0;
  width:auto; /* evita empurrar o botão de olho pra fora do input */
  font-size:16px;
  height:100%;
  background:transparent;
}
.input.has-pw-toggle input{
  padding-right:40px; /* reserva espaço visual pro ícone (como placeholder) */
}
.pw-toggle{
  border:0;
  background:transparent;
  padding:0;
  width:32px;
  min-width:32px;
  height:32px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--c-placeholder);
  cursor:pointer;
  border-radius:8px;
  opacity:.38;
}
.input.has-pw-toggle .pw-toggle{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
}
.pw-toggle:hover{
  background:transparent;
  color:var(--c-placeholder);
  opacity:.65;
}
.input:focus-within .pw-toggle{ opacity:.6; }
.input.pw-visible .pw-toggle{ opacity:.8; }
.pw-toggle:focus-visible{
  outline:2px solid rgba(var(--c-accent-rgb), .32);
  outline-offset:2px;
}
.pw-toggle svg{ width:16px; height:16px; }
.pw-toggle .eye-off{ display:none; }
.input.pw-visible .pw-toggle .eye-on{ display:none; }
.input.pw-visible .pw-toggle .eye-off{ display:block; }

/* CTA principal proporcional aos inputs e ao card */
.btn-lg{
  height:var(--control-h);
  width:100%;
  font-size:16px;
  border-radius:14px;
}

/* Alertas (login/signup) */
.auth-alert{
  background:rgba(185,28,28,.06);
  border:1px solid rgba(185,28,28,.18);
  color:#7f1d1d;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  font-weight:700;
}

/* Links utilitários */
.inline{ color:var(--c-navy); text-decoration:none; font-weight:700 }
.inline:hover{ text-decoration:underline }
.row{ display:flex; justify-content:space-between; gap:10px; align-items:center; margin:16px 0 10px }
.auth-card .row .inline{ font-size:11px; } /* ~30% menor que 16px */

/* Divisor */
.hr{ display:flex; align-items:center; gap:12px; color:#7b8896 }
.hr::before, .hr::after{ content:""; height:1px; background:var(--c-line); flex:1 }

/* Distribuição vertical ("passarela") */
.auth-card form{ margin-top:4px; }
.auth-card .input.mt-3{ margin-top:16px !important; }
.auth-card .btn-lg.mt-4{ margin-top:22px !important; }
.auth-card .hr.mt-4{ margin-top:26px !important; }
.auth-card .hr.mb-4{ margin-bottom:26px !important; }
.auth-card .footer-note{ margin-top:60px; } /* +25% (48px -> 60px) */

/* Botões de OAuth com ícones oficiais (SVG inline no HTML) */
.btn-oauth{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--c-line); background:#fff; border-radius:14px;
  padding:12px 14px; font-weight:600; width:100%; justify-content:center
}
.btn-oauth .icon{ display:inline-flex; width:20px; height:20px }
.btn-oauth:hover{ box-shadow:0 8px 20px rgba(6,27,66,.08) }

/* Rodapé auxiliar */
.footer-note{ color:#9aa7b4; font-size:12px; text-align:center; margin-top:14px }

/* Acessibilidade mínima */
:focus-visible{ outline:2px solid var(--c-orange); outline-offset:2px }

/* Responsividade fina */
@media (max-width:420px){
  .auth-body.auth-body--card{ padding:22px 12px; }
  body.login.crontex-admin{ padding:22px 12px; }
  .auth-card{ padding:64px 18px 66px; width:min(360px, 100%); }
  .logo{ width:142px; margin-bottom:26px; }
}

/* Mobile (<=520px): links abaixo do form devem ficar centralizados e empilhados */
@media (max-width:520px){
  /* Mobile: card alto não deve ficar “no meio” (risco de cortar inputs). */
  .auth-body.auth-body--card{
    align-items:flex-start;
    padding-top:22px;
    padding-bottom:22px;
  }

  .auth-card .row{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    margin:14px 0 8px;
    text-align:left;
    flex-wrap:nowrap;
  }
  .auth-card .row .inline{ white-space:nowrap; }
}

@media (max-height:700px){
  .auth-body.auth-body--card{ align-items:flex-start; padding-top:18px; padding-bottom:18px; }
  body.login.crontex-admin{ align-items:flex-start; padding-top:18px; padding-bottom:18px; }
}