/* ==========================================================================
   CONSTELACAO — onde a grade animada encosta no desenho do login  (18/09/2026)

   Esta folha ENTRA POR ULTIMO na pagina de login, no lugar da silk.css. Ela
   nao redesenha o formulario: so transforma a folha da direita no FUNDO DA
   TELA INTEIRA e garante que a logo, o link do topo e o rodape continuem
   legiveis por cima da grade.

   OS DOIS NUMEROS QUE VOCE VAI QUERER MEXER estao logo abaixo:
     --cons-veu-centro  o quanto o fundo escurece atras da caixa branca (mais
                        alto = texto mais seguro, grade menos visivel)
     --cons-veu-borda   o mesmo nas beiradas da tela, onde nao ha texto.

   PARA DESLIGAR A CONSTELACAO: tire as duas linhas (esta folha e o
   constelacao.js) do login.html. A tela volta para o Atlantico chapado do
   v5-login.css, sem mais nada.
   ========================================================================== */

:root {
  /* 18/09/2026 — MEDIDO no print: com .72 no centro a grade praticamente
     desaparecia (as ligacoes desenham a 0,18 de alfa; o veu tirava 3/4 do que
     sobrava). O texto que corre risco aqui e so a logo e dois links, que ficam
     na faixa de cima — e nao no meio, onde mora a caixa BRANCA. */
  --cons-veu-centro: .42;
  --cons-veu-borda: .10;
}

/* ---------------------------------------------------------------- o canvas
   O elemento com data-constelacao e so uma moldura: o <canvas> nasce dentro
   dele, por JS, e ocupa tudo. Nem um nem outro recebe clique. */
.constelacao-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--ds-atlantico);   /* a cor do 1o quadro, antes do JS acordar */
}
.constelacao-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* SEM CANVAS 2D (navegador muito velho, canvas bloqueado por politica) o
   constelacao.js poe esta classe e desiste. O degrade usa degraus da rampa. */
.constelacao-sem-canvas {
  background: radial-gradient(70% 60% at 50% 0%,
    var(--ds-atlantico-2) 0%, var(--ds-atlantico) 70%);
}

@media print { .constelacao-fundo { display: none !important; } }


/* ==========================================================================
   LOGIN — a grade e o fundo da PAGINA INTEIRA
   --------------------------------------------------------------------------
   O v5-login.css deixa a porta numa coluna so, centralizada, sobre o
   Atlantico chapado. Nada disso muda: a folha da direita (.porta-prova), que
   estava desligada, volta como uma camada FIXA atras de tudo. O formulario
   continua na mesma caixa branca, na mesma largura, no mesmo lugar.
   ========================================================================== */

body.v5-login .porta-prova {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 0 !important;
  pointer-events: none;
  background: var(--ds-atlantico) !important;
}
/* o brilho radial que a folha da direita tinha sai: quem pinta agora e a grade */
body.v5-login .porta-prova:before { display: none !important; }
body.v5-login .porta-prova .constelacao-fundo { inset: 0; border-radius: 0; }

/* O VEU — e ele que mantem a logo branca, o link do topo e o rodape legiveis.
   Mais forte no meio (onde o texto esta) e fraco nas beiradas, para a grade
   continuar aparecendo. */
body.v5-login .porta-prova .constelacao-fundo:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 85% at 50% 50%,
    rgba(var(--ds-atlantico-rgb), var(--cons-veu-centro)) 0%,
    rgba(var(--ds-atlantico-rgb), var(--cons-veu-centro)) 26%,
    rgba(var(--ds-atlantico-rgb), var(--cons-veu-borda)) 78%,
    rgba(var(--ds-atlantico-rgb), var(--cons-veu-borda)) 100%);
}

/* O RODAPE — medido em 1440x900: com a cor de apoio (#A8C4CB) ele dava
   4,70:1 sobre o ponto mais claro da grade. Passa, mas por 0,2 — e o rodape
   fica justamente na beirada de baixo, onde o veu e o mais fraco. Na nevoa
   ele vai a 10:1 e para de depender de onde o no caiu. */
body.v5-login .rodape-porta,
body.v5-login .rodape-porta a { color: var(--ds-nevoa); }

/* o conteudo sobe para cima da camada fixa */
body.v5-login .porta { position: relative; z-index: 1; }
body.v5-login .porta-conta { position: relative; z-index: 1; }

/* CELULAR — nada a fazer: a camada ja e fixa e cobre a tela inteira nas duas
   larguras. So o veu fica um pouco mais forte, porque no telefone o texto do
   topo e do rodape ocupa a largura toda. */
@media (max-width: 940px) {
  body.v5-login .porta-prova .constelacao-fundo:after {
    background: linear-gradient(180deg,
      rgba(var(--ds-atlantico-rgb), .84) 0%,
      rgba(var(--ds-atlantico-rgb), .62) 26%,
      rgba(var(--ds-atlantico-rgb), .52) 60%,
      rgba(var(--ds-atlantico-rgb), .78) 100%);
  }
}