/* Telas de entrada e criação de conta.
   Herda as variáveis de css/radar.css — ébano, marfim, ouro, pedra. */

.auth-body{
  min-height:100vh; margin:0;
  display:flex; flex-direction:column;
  background:var(--bg,#14110D); color:var(--fg,#EFE7D8);
}

/* ── tarja de demonstração ──────────────────────────────────────────
   Vermelha e no topo de propósito. Enquanto a autenticação não for
   verificada num servidor, esta é a informação mais importante da tela. */
.tarja{
  background:#2A1416; border-bottom:1px solid #E01E37;
  padding:10px 20px; display:flex; gap:12px; flex-wrap:wrap; align-items:baseline;
  font-family:var(--font-mono,ui-monospace,monospace); font-size:11.5px; line-height:1.6;
}
.tarja b{color:#E01E37; letter-spacing:.14em; white-space:nowrap}
.tarja span{color:var(--fg-2,#98907F)}
.tarja code{color:var(--ouro-300,#D0BE9F)}

.auth-wrap{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px; padding:44px 20px 60px;
}

.auth-marca{text-align:center}
.auth-marca .marca{
  font-family:var(--serif,serif); font-size:26px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
}
.auth-marca .sub{
  font-family:var(--font-mono,monospace); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-2,#98907F); margin-top:5px;
}

.auth-card{
  width:100%; max-width:420px;
  background:var(--bg-2,#1C1915);
  border:1px solid var(--line,rgba(239,231,216,.22));
  border-radius:10px; overflow:hidden;
}

/* ── abas ───────────────────────────────────────────────────────── */
.auth-abas{display:flex; border-bottom:1px solid var(--line,rgba(239,231,216,.22))}
.auth-abas button{
  flex:1; background:none; border:0; cursor:pointer;
  padding:14px 10px; color:var(--fg-2,#98907F);
  font-family:var(--font-mono,monospace); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  border-bottom:2px solid transparent;
}
.auth-abas button:hover{color:var(--fg,#EFE7D8)}
.auth-abas button.on{color:var(--ouro,#B9975B); border-bottom-color:var(--ouro,#B9975B)}

.auth-painel{display:none; flex-direction:column; gap:18px; padding:24px 22px 26px}
.auth-painel.on{display:flex}

/* ── campos ─────────────────────────────────────────────────────── */
.campo{display:flex; flex-direction:column; gap:6px}
.rot-linha{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.campo label{
  font-family:var(--font-mono,monospace); font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ouro,#B9975B);
}
.campo input{
  width:100%; padding:11px 12px;
  background:var(--bg,#14110D); color:var(--fg,#EFE7D8);
  border:1px solid var(--line,rgba(239,231,216,.22)); border-radius:6px;
  font-family:inherit; font-size:15px;
}
.campo input:focus{outline:2px solid var(--ouro,#B9975B); outline-offset:1px; border-color:transparent}
.campo input[aria-invalid="true"]{border-color:#E01E37}

.ver{
  background:none; border:0; cursor:pointer; padding:0;
  font-family:var(--font-mono,monospace); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-2,#98907F); text-decoration:underline;
  text-underline-offset:3px;
}
.ver:hover{color:var(--ouro,#B9975B)}
.ver:focus-visible{outline:2px solid var(--ouro,#B9975B); outline-offset:2px}

.ajuda{margin:0; font-size:12.5px; line-height:1.5; color:var(--fg-2,#98907F)}
.erro{margin:0; font-size:12.5px; line-height:1.5; color:#E8697C; min-height:0}
.erro:empty{display:none}

.erro-geral{
  background:#2A1416; border:1px solid rgba(224,30,55,.5); border-radius:6px;
  padding:11px 13px; font-size:13.5px; color:#F0A8B2;
}
.aviso-caps{
  margin:0; font-family:var(--font-mono,monospace); font-size:11px; color:#FF9F1C;
}

/* ── medidor de força ───────────────────────────────────────────── */
.forca{
  height:4px; border-radius:2px; overflow:hidden;
  background:rgba(239,231,216,.10); margin-top:2px;
}
.forca i{
  display:block; height:100%; width:0; border-radius:2px;
  background:#E01E37; transition:width .18s ease, background-color .18s ease;
}
@media (prefers-reduced-motion:reduce){ .forca i{transition:none} }

/* ── botão ──────────────────────────────────────────────────────── */
.btn-principal{
  width:100%; padding:13px; cursor:pointer;
  background:var(--ouro,#B9975B); color:#14110D; border:0; border-radius:6px;
  font-family:var(--font-mono,monospace); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}
.btn-principal:hover{background:var(--ouro-300,#D0BE9F)}
.btn-principal:focus-visible{outline:2px solid var(--fg,#EFE7D8); outline-offset:2px}
.btn-principal[disabled]{opacity:.5; cursor:progress}

.rodape-link{margin:0; text-align:center; font-size:13px}
.rodape-link a{color:var(--fg-2,#98907F); text-decoration:underline; text-underline-offset:3px}
.rodape-link a:hover{color:var(--ouro,#B9975B)}
.nota{
  margin:0; padding:11px 13px; border-radius:6px;
  background:rgba(239,231,216,.05); border:1px solid var(--line-soft,rgba(239,231,216,.10));
  font-size:12.5px; line-height:1.55; color:var(--fg-2,#98907F);
}

.pe-de-pagina{
  max-width:420px; margin:0; text-align:center;
  font-family:var(--font-mono,monospace); font-size:11px; line-height:1.7;
  color:var(--fg-3,#6B6558);
}