/* ============================================================================
   A SUPERFÍCIE INSTITUCIONAL — um painel escuro, dois mundos (04/11/2026)
   ----------------------------------------------------------------------------
   O par de painéis — faixa escura com a frase da instituição à esquerda,
   conteúdo à direita — é a cara do SIGA para quem chega de fora: a tela de
   entrada, o simulador de bolsas, a Jornada de Afinidades, o portal de
   inscrição e a área do candidato.

   **Por que isto saiu do `estilos.css`.** As páginas públicas não carregam o
   aplicativo: elas têm folha própria (`publico.css`), leve, porque quem abre o
   portal de inscrição no celular não precisa baixar 557 KB de sistema
   administrativo. Mas a superfície tinha de ser a MESMA — e copiá-la para a
   outra folha criaria uma segunda definição do mesmo degradê. No dia em que a
   instituição trocasse o fundo em Configurações, a tela de entrada mudaria e o
   portal não, e ninguém saberia por quê. É o defeito que o timbre, a régua
   vermelha e a moldura dos cartões já custaram a este projeto.

   Então a superfície virou folha própria, carregada pelas duas pontas. Uma
   definição, dois lugares.

   **Esta folha não declara cor de marca.** Ela usa `var(--red)`, `var(--wh)` e
   `var(--titulo)` de quem a carrega — e cada ponta já tem os seus, derivados da
   mesma cor cadastrada. O que ela declara, e só ela, são as duas pontas do
   chão do degradê.
   ============================================================================ */

/* As duas pontas do CHÃO. Eram dois cinzas escritos dentro da fórmula; desde 30/10 a instituição
   pode trocá-las em Configurações → Identidade visual, e as superfícies mudam juntas.
   O padrão mora AQUI e só aqui: a tela precisa dele para pintar antes de o JS ler a configuração,
   e o seletor de cor da tela de Configurações lê este mesmo valor quando nada foi cadastrado —
   escrever o padrão também no Python ou no JS daria dois donos para uma decisão só. */
:root{--inst-ini:#161617;--inst-fim:#272729}

/* Uma regra, três superfícies. `--cor-disc` permite que a faixa de uma disciplina entre no lugar
   do vermelho da marca; sem ela, vale `--red-rgb`.

   `background-color` é o chapado que fica se o degradê não pintar — e é também o que o navegador
   enxerga POR BAIXO do realce, que chega com alfa. Por isso ele é a ponta final, e não um terceiro
   cinza solto: a conta do contraste, no servidor, mistura o realce com esta mesma cor. */
.auth-aside,.vg-faixa,.ct-banda{background-color:var(--inst-fim);
  background-image:linear-gradient(125deg,var(--inst-ini) 0%,var(--inst-fim) var(--inst-meio,48%),
    rgba(var(--cor-disc,var(--red-rgb)),var(--inst-alfa,.38)) 100%)}

.auth-split{display:flex;flex-wrap:wrap;width:100%;max-width:940px;margin:auto;
  background:var(--wh);border-radius:18px;overflow:hidden;box-shadow:0 14px 44px rgba(16,24,40,.13)}
.auth-aside{flex:1 1 360px;min-width:0;box-sizing:border-box;min-height:520px;
  color:#fff;padding:42px 38px;
  display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.auth-main{flex:1 1 360px;min-width:0;display:flex;align-items:center;padding:0}

/* O conteúdo da metade direita tem largura própria e fica centrado nela. Sem isso, o campo de
   e-mail se estica pela coluna inteira — e um campo de 500px para escrever um e-mail parece um
   erro de desenho, mesmo com a coluna na medida certa.
   `--form-max` é o botão de ajuste: a tela de entrada pede um e-mail e uma senha e fica nos
   352px; o portal de inscrição tem grades de três colunas e pede mais. Um número por superfície,
   e não uma segunda regra. */
.auth-form{width:100%;max-width:var(--form-max,352px);margin:auto;background:none;border:0;
  border-radius:0;box-shadow:none;padding:40px 30px;box-sizing:border-box}
@media(max-width:900px){.auth-form{padding:24px 20px}}

/* O conteúdo do painel escuro fica EMBAIXO (`justify-content:flex-end`), e o nome da página no
   alto é empurrado para lá pelo `margin-bottom:auto` do `.aa-topo`. */
.aa-content{position:relative;z-index:2;max-width:460px}
/* peso 700: a Poppins embarcada traz 600 e 700, e pedir 800 fazia o navegador engordar a face
   sozinho ou cair fora da família */
.aa-content h1,.aa-content h2{font-family:var(--titulo);font-size:26px;font-weight:700;
  line-height:1.22;letter-spacing:-.5px;margin:0}
.aa-content p,.aa-sub{font-size:13.5px;opacity:.9;line-height:1.65;margin:0;max-width:300px}
.aa-risco{width:50px;height:3px;background:var(--red);border-radius:2px;margin:18px 0 14px}
/* O risco só aparece quando não há frase abaixo do título; com a frase, ele vira ruído. */
.aa-content:has(.aa-sub:not(:empty)) .aa-risco{display:none}
/* O logotipo aparece uma vez só, no lado do conteúdo: repetido também no painel da marca ficava
   redundante na mesma tela, e no celular ainda custava altura. */
.aa-content img{display:none}
/* trecho em destaque no título: escreva *assim* no texto e ele sai em dourado */
.aa-hi{color:#f0b429}

/* O nome da página pública aberta, no alto do painel lateral. `margin-bottom:auto` empurra para
   o topo sem desfazer o alinhamento embaixo da frase institucional, que continua sendo o que o
   painel tem de mais importante. */
.aa-topo{position:relative;z-index:1;margin-bottom:auto;font-family:var(--titulo);
  font-size:14.5px;font-weight:600;letter-spacing:.2px;color:#fff;opacity:.92}
@media(max-width:860px){.aa-topo{margin-bottom:14px;font-size:13px}}

/* ---- Celular: as duas metades empilham (flex-wrap faz sozinho) e o painel encolhe ----
   540px de faixa escura antes do formulário empurrariam os campos para fora da tela. */
@media(max-width:900px){
  .auth-split{max-width:520px}
  .auth-aside{flex:none;width:100%;min-height:0;padding:24px 22px}
  .auth-main{flex:none;width:100%}
  .aa-content h1,.aa-content h2{font-size:20px}
  .aa-content p,.aa-sub{font-size:13px;max-width:none}
  .aa-risco{margin:14px 0 11px}
}
/* Tela baixa (celular deitado): o painel encolhe ainda mais, para o formulário caber sem rolar.
   Aqui havia `min-height:170px`, que vinha do desenho de duas colunas e agora faria o contrário —
   forçaria a faixa escura a crescer justamente onde falta altura. */
@media(max-width:900px) and (max-height:700px){
  .auth-aside{min-height:0;padding:16px 22px}
  .aa-content h1,.aa-content h2{font-size:18px}
  .aa-content p,.aa-sub{display:none}
}