/* O fundo (logo + cenário) agora vem do stage.css/_stage.html — o mesmo
   usado na página de apresentação, no estado já assentado (.stage.settled).
   Aqui só ficam os ajustes específicos do card/campos sobre esse fundo. */

.center-screen .card {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), inset 0 0 20px rgba(255, 255, 255, 0.04);
}

.center-screen .field label { color: rgba(255, 255, 255, 0.75); text-align: center; }
.center-screen .field input {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  text-align: center;
}
.center-screen .field input::placeholder { color: rgba(255, 255, 255, 0.45); }

/* Campos com ícone (usuário/senha) — texto e placeholder alinhados à
   esquerda, deslocados pra abrir espaço pro ícone/botão sobreposto. */
.center-screen .input-icon { position: relative; }
.center-screen .input-icon input {
  padding-right: 2.6rem;
  text-align: left;
}
.center-screen .input-icon-svg {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.center-screen .input-icon-toggle {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  color: rgba(255, 255, 255, 0.55);
}
.center-screen .input-icon-toggle svg { width: 18px; height: 18px; }
.center-screen .input-icon-toggle:hover { color: rgba(255, 255, 255, 0.9); }

/* O autofill do navegador (e-mail/senha salvos) troca o fundo do campo pro
   amarelo/azul padrão dele assim que preenche — sem isso, o campo "pisca"
   pra fora do visual vidro um instante depois do card aparecer. */
.center-screen .field input:-webkit-autofill,
.center-screen .field input:-webkit-autofill:hover,
.center-screen .field input:-webkit-autofill:focus,
.center-screen .field input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.12) inset;
  box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.12) inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* Alguns navegadores (Edge com "Autofill" de dados pessoais, não só senha
   salva) pintam o campo de um jeito que nem o truque acima sobrepõe. Esse
   keyframe vazio só existe pra disparar um evento "animationstart" que o
   JS (login_glass.js) escuta pra forçar a cor de novo na marra. */
@keyframes onAutoFillStart { from {} to {} }
.center-screen .field input:-webkit-autofill {
  animation-name: onAutoFillStart;
  animation-duration: 1ms;
}

/* O brilho dourado que segue o cursor no hover (definido globalmente pra
   .card no resto do app) não deve aparecer nessa tela — é só um efeito de
   painel de dashboard, não faz parte da revelação do login. */
.center-screen .card::before { display: none; }

.center-screen .help,
.center-screen .help a { color: rgba(255, 255, 255, 0.75); }
.center-screen .help a:hover { color: var(--brass-bright); }

/* ---- Botão "Specular" (só o botão Entrar do login) ----
   Réplica do componente React SpecularButton pedido: fundo cinza-escuro
   sólido, texto quase-branco, e um brilho branco na borda que gira pra
   onde o mouse está e acende conforme ele se aproxima (raio de 250px,
   calculado em login_glass.js via --spec-angle/--spec-opacity) — mesma
   técnica do glow colorido dos cards de gráfico (.fidem-chart-glow em
   style.css), só que reagindo à proximidade do cursor em vez de precisar
   estar sobre o elemento, e sem o giro automático (autoAnimate:false no
   componente original — só reage a mouse real). Isolado numa classe
   própria porque é um pedido específico desse botão, não um padrão pro
   resto dos .btn-primary do site. */
.btn-specular {
  position: relative;
  overflow: visible;
  background: #525252;
  color: #f5f5f5;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.btn-specular:hover { background: #5c5c5c; }
.btn-specular:hover, .btn-specular:focus-visible { box-shadow: none; }
/* Halo desfocado por trás do botão (mesma técnica do glow externo dos
   cards de gráfico, .fidem-gauge-card.fidem-chart-glow::before em
   style.css) — sem isso o brilho só aparecia na linha fina da borda,
   quase imperceptível a olho nu fora de um zoom bem próximo. */
.btn-specular::before {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from var(--spec-angle, 0deg),
    transparent 0deg,
    rgba(255, 255, 255, 0.95) 25deg,
    transparent 80deg,
    transparent 360deg
  );
  filter: blur(16px);
  opacity: var(--spec-opacity, 0);
  transition: opacity .35s ease;
}
.btn-specular::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(
    from var(--spec-angle, 0deg),
    transparent 0deg,
    #ffffff 25deg,
    transparent 80deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--spec-opacity, 0);
  transition: opacity .35s ease;
}