/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   login.css — só a tela de entrar. Carrega DEPOIS do tema.css.

   A arte do Rich é o FUNDO DA PÁGINA INTEIRA, não um painel dividido: ela já vem composta com o
   escorpião à esquerda e muito espaço vazio à direita, que é onde o cartão pousa. Foi ele que
   desenhou assim — o layout aqui só respeita a composição em vez de brigar com ela.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: flex-end;
  padding: var(--e5) clamp(var(--e5), 9vw, 190px); overflow-x: hidden; }

/* ═══════════ FUNDO ═══════════ */
/* <img> em vez de background-image por causa do onerror: some sozinho se o arquivo faltar, e aí
   sobra o preto do tema — tela feia é melhor que tela quebrada.
   `object-position: left center`: a arte tem 2,5:1 e a tela costuma ser mais estreita, então o
   `cover` corta os lados. Ancorando à esquerda, o escorpião NUNCA é cortado — o que se perde é o
   canto direito, que é vazio de propósito. */
.fundo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: left center; z-index: -2; pointer-events: none; }

/* véu: escurece o lado do formulário sem apagar o escorpião do outro lado. Sem ele, o cartão
   translúcido pousaria em cima de uma área com textura e o texto perderia contraste. */
.fundo-veu { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, transparent 0%, transparent 34%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.8) 100%),
    radial-gradient(58vmax 46vmax at 88% 50%, rgba(109,74,255,.13), transparent 68%); }

/* ═══════════ FORMULÁRIO ═══════════ */
.card { width: min(430px, 100%); border-radius: var(--r-g); padding: var(--e7) var(--e6) var(--e6);
  background: linear-gradient(168deg, rgba(29,24,48,.72), rgba(14,11,24,.9));
  border: 1px solid var(--borda);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--sombra-g), 0 0 90px -40px rgba(109,74,255,.6);
  position: relative; animation: entra var(--suave) both; }
/* Fios de luz nas bordas: OURO em cima, ROXO embaixo. As duas cores da marca emoldurando o
   cartão — e o roxo embaixo fecha a composição em vez de deixar a base solta. Mesma geometria
   nos dois (14% de recuo, 1px, brilho por fora), só muda a cor e a aresta. */
.card::after { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acao), transparent);
  box-shadow: 0 0 14px 1px rgba(245,184,28,.6); }
.card::before { content: ''; position: absolute; bottom: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--roxo-500), transparent);
  box-shadow: 0 0 14px 1px rgba(109,74,255,.65); }
@keyframes entra { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } }

.marca { display: flex; align-items: center; justify-content: center; gap: 13px; margin-bottom: var(--e5); }
.marca .selo-g { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  border: 1.5px solid var(--acao-borda); box-shadow: inset 0 0 18px rgba(245,184,28,.16), 0 0 22px -8px rgba(245,184,28,.6); }
/* ⚠️ NÃO tirar a moldura do CSS aqui. O emblema usado dentro do site é o escorpião com fundo
   transparente e um ARCO (não um círculo fechado) — é a moldura que fecha o selo. Cheguei a
   remover quando testei o distintivo circular, e aí o emblema ficou solto no cartão. */
.marca .selo-g img { width: 100%; height: 100%; object-fit: contain; }
.marca .selo-g span { font: 850 22px/1 var(--pilha-display); background: var(--metal-txt);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

.card h1 { font: 750 27px/1.2 var(--pilha-display); letter-spacing: -.025em; text-align: center; margin: 0 0 5px; }
.card h1 .ouro { background: var(--metal-txt); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { text-align: center; color: var(--conteudo-mudo); font-size: var(--t-base); margin: 0 0 var(--e6); }

.card label { display: block; font: var(--peso-forte) var(--t-micro)/1.2 var(--pilha-display);
  letter-spacing: .1em; text-transform: uppercase; color: var(--acao); margin-bottom: 7px; }
.lrow { display: flex; align-items: baseline; justify-content: space-between; }
.lrow a { font: 650 var(--t-peq)/1 var(--pilha-fonte); color: var(--realce-txt); text-decoration: none; cursor: pointer; }
.lrow a:hover { text-decoration: underline; }

/* ── CAMPO ──
   ⚠️ Aqui se usa a ANATOMIA DO TEMA: `.campo-caixa` (moldura, sem borda) + `.campo` (o input, que
   tem a borda). A versão anterior punha class="campo" no DIV e estilizava `.campo input`, então o
   div herdava a borda do tema E o input ganhava outra — BORDA DUPLA na tela.
   Redefinir aqui o que o tema já faz foi a causa; a correção é não redefinir. */
.campo-caixa { margin-bottom: var(--e4); }
.campo-caixa .ic { position: absolute; left: 14px; width: var(--icone-m); height: var(--icone-m);
  color: var(--conteudo-sutil); pointer-events: none; display: grid; place-items: center;
  transition: color var(--rapido); z-index: 1; }
.campo-caixa:focus-within .ic { color: var(--realce-txt); }
.campo-caixa .ic svg { width: 100%; height: 100%; }
/* espaço pro ícone à esquerda e pro olho à direita (o tema já reserva a esquerda; a direita é daqui) */
.campo-caixa > .campo { padding-right: 46px; }

.olho { position: absolute; right: 5px; width: var(--alvo-min); height: var(--alvo-min);
  background: none; border: 0; color: var(--conteudo-sutil); cursor: pointer; display: grid; place-items: center;
  border-radius: var(--r-p); font-size: 16px; }
.olho:hover { color: var(--conteudo); }
.olho:focus-visible { outline: none; box-shadow: var(--luz-foco); }

/* ═══════════ BOTÕES ═══════════ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); width: 100%;
  min-height: var(--btn-alt-g); border: 1px solid transparent; border-radius: var(--r-m);
  font: 750 var(--t-med)/1 var(--pilha-display); cursor: pointer; position: relative; overflow: hidden;
  transition: transform var(--rapido), box-shadow var(--normal), background var(--rapido), border-color var(--rapido); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--luz-foco); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--metal); color: var(--acao-texto); box-shadow: var(--luz-acao); margin-top: var(--e2); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 0 0 1px rgba(245,184,28,.5), 0 12px 34px -6px rgba(245,184,28,.5); }
/* lustro que atravessa UMA vez no hover, não em loop */
.btn-primary::after { content: ''; position: absolute; inset: 0; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
  transition: transform 680ms cubic-bezier(.4,0,.2,1); }
.btn-primary:hover::after { transform: translateX(130%); }
.btn-ghost { background: var(--superficie-2); color: var(--conteudo); border-color: var(--borda-forte); font-weight: 600; }
.btn-ghost:hover { background: var(--superficie-3); border-color: var(--realce-borda); }

.ou { display: flex; align-items: center; gap: var(--e3); margin: var(--e4) 0; color: var(--conteudo-sutil); font-size: var(--t-peq); }
.ou::before, .ou::after { content: ''; flex: 1; height: 1px; background: var(--borda); }

/* ═══════════ AVISO ═══════════ */
.msg { display: none; border-radius: var(--r-m); padding: 11px 14px; font-size: var(--t-peq); margin-bottom: var(--e4); }
.msg.erro { display: block; background: var(--parado-veu); color: var(--estado-parado); border: 1px solid rgba(255,77,94,.3); }
.msg.ok   { display: block; background: var(--acao-veu);   color: var(--acao);          border: 1px solid var(--acao-borda); }

.rodape { text-align: center; margin-top: var(--e4); font-size: var(--t-peq); color: var(--conteudo-sutil); }
.rodape a { color: var(--acao); text-decoration: none; font-weight: 650; cursor: pointer; }
.rodape a:hover { text-decoration: underline; }

/* faixa de destaques (só celular, onde a arte não aparece) */
.mob-tiles { display: none; gap: var(--e2); margin-top: var(--e5); }
.mob-tiles .tile { flex: 1; text-align: center; padding: var(--e3) 6px; border-radius: var(--r-m);
  background: var(--superficie-2); border: 1px solid var(--borda); }
.mob-tiles .v { font: 800 var(--t-med)/1 var(--pilha-display); background: var(--metal-txt);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.mob-tiles .l { font-size: 10px; color: var(--conteudo-mudo); margin-top: 3px; }
.mob-nota { display: none; text-align: center; font-size: var(--t-peq); color: var(--conteudo-sutil); margin-top: var(--e3); }

@media (max-width: 900px) {
  body { justify-content: center; padding: var(--e4); }
  /* O <picture> já entrega aqui um recorte RETRATO com o escorpião centralizado, então a âncora
     volta pro centro. Ancorar em 26% era um remendo pra fatiar a arte panorâmica — e o resultado
     mudava conforme a largura do aparelho, que foi o que deixou a capa fora de centro. */
  .fundo { object-position: center center; }
  .fundo-veu { background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.86)); }
  .card { padding: var(--e6) var(--e5) var(--e5); }
  .mob-tiles { display: flex; }
  .mob-nota { display: block; }
}

/* ═══════════ ALVO DE TOQUE ═══════════ */
/* O tema garante 44px em `.esqueci`/`.ver-tudo`, mas AQUI esses elementos são #id (#esqueci,
   #criar) e a regra por classe não os alcança — medido no celular: 12px e 15px de altura.
   Link de texto não pode virar bloco de 44px no meio da frase, então estica só a área clicável
   por fora, com um pseudo invisível. 24px é o piso do WCAG 2.5.8 pra mouse; 44 é regra de dedo. */
.lrow a, .rodape a { display: inline-flex; align-items: center; min-height: 24px; }

@media (pointer: coarse) {
  .lrow a, .rodape a { position: relative; }
  .lrow a::after, .rodape a::after { content: ''; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); width: 100%; min-width: var(--alvo-min); height: var(--alvo-min); }
  .olho { width: var(--alvo-min); height: var(--alvo-min); }
}