/* ============================================================================ Páginas públicas do SIGA — o que gente de fora vê Evento, crachá e comprovante não são o aplicativo: são três páginas soltas, sem sessão, servidas por endereço próprio. Cada uma vinha declarando os seus próprios tokens, com o vermelho escrito à mão — então a cor cadastrada em Configurações valia dentro do sistema e não valia aqui, e as três ficavam congeladas no valor do dia em que foram escritas. Esta folha é o contrato comum das três: os mesmos tokens do `estilos.css`, o mesmo cabeçalho e a Poppins nos títulos. A cor fica com um padrão escrito aqui para a página funcionar mesmo sem rede; `publico.js` sobrepõe com a cor da instituição assim que `/config` responde. ============================================================================ */ :root{ --red:#E20613;--red-d:#b50510;--red-l:#fdecee; /* Os componentes da cor, para o degradê institucional de `superficie.css`. `publico.js` sobrepõe com a cor cadastrada; este é o valor que pinta antes de `/config` responder — sem ele a terceira parada do degradê é inválida e o painel sai cinza chapado. */ --red-rgb:226,6,19; /* O anel de foco NÃO é vermelho. Era `--red`, a mesma família do `.erro`, e num formulário contorno vermelho é a convenção universal de "você errou": o candidato clicava no CPF, via vermelho e achava que já tinha feito algo errado antes de digitar. O vermelho fica reservado ao erro; o foco é neutro e tem contraste suficiente sobre o branco e sobre o cinza do fundo. */ --foco:#1f6fd6; --ink:#14161a;--ink2:#3d434d;--ink3:#606874;--ink4:#69727f; --line:#e7e9ee;--line2:#d5dae2;--bg:#f5f6f8;--w:#fff;--wh:#fff; --grn:#1a9d55;--amb:#b8860b; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --titulo:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* As mesmas duas faces latinas do aplicativo, hospedadas aqui mesmo: 16 KB. Só títulos — corpo de texto segue na fonte do sistema, que é mais discreta em tabela densa e não cobra download nenhum. */ @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap; src:url('/assets/fontes/poppins-latin-600-normal.woff2') format('woff2')} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap; src:url('/assets/fontes/poppins-latin-700-normal.woff2') format('woff2')} *{box-sizing:border-box} /* `hidden` TEM DE ESCONDER. O atributo vale por uma regra `display:none` da folha do navegador, que QUALQUER `display` escrito aqui vence — e foi o que aconteceu com o palco das páginas públicas: `.pub-palco{display:flex}` ganhava do `hidden`, e depois de entrar o candidato via o painel vazio no lugar da própria consulta. Uma linha resolve para a página inteira. */ [hidden]{display:none!important} body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.5} /* ---------- cabeçalho: o mesmo nas superfícies públicas ---------- LOGO DE UM LADO, NOME DA PÁGINA DO OUTRO (04/11/2026). Os dois estavam colados no canto esquerdo e disputavam a mesma vista: a marca e o nome da página brigando pelo mesmo olhar, com o nome da faculdade por extenso entre eles. O extenso saiu — a marca já diz de quem é a página, e repeti-lo em caixa-alta ao lado dela é o mesmo dado duas vezes. Ficaram as duas coisas que respondem perguntas diferentes: DE QUEM é (o logo, à esquerda) e O QUE é (o nome, à direita). */ .topo{background:var(--red);color:#fff;padding:22px 20px} .topo .wrap{max-width:860px;margin:auto;display:flex;gap:14px;align-items:center; justify-content:space-between} .topo img{height:38px} .topo .tit{font-size:18px;font-weight:700;font-family:var(--titulo);line-height:1.25; text-align:right;min-width:0} /* No telefone os dois empilham: "Certificado de conclusão do ensino médio" ao lado de um logo de 38px não cabe em 360px, e encolher a fonte para caber é esconder o problema. */ @media(max-width:560px){ .topo .wrap{flex-direction:column;align-items:flex-start;gap:10px} .topo .tit{text-align:left;font-size:17px} } /* O ESPAÇO ENTRE A BARRA E O PRIMEIRO QUADRO mora aqui, e aqui só. Cada página redeclarava `.wrap{margin:auto}` para trocar a largura máxima e, com isso, apagava o `24px` de cima sem querer — o primeiro cartão nascia colado na barra vermelha nas cinco páginas, pelo mesmo motivo, cinco vezes. As páginas mudam a LARGURA; o espaçamento é desta folha. */ .wrap{max-width:860px;margin:24px auto;padding:0 20px} .card{background:var(--w);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:16px} .card h2{margin:0 0 14px;font-size:16px;font-family:var(--titulo);font-weight:700} h1,h2,h3{font-family:var(--titulo)} .sub{color:var(--ink3);font-size:13px} .aviso{background:#fff8e6;border:1px solid #f0dca8;color:#7a5b00;border-radius:10px;padding:11px 13px;font-size:13.5px;margin-bottom:14px} .erro{color:var(--red-d);font-size:13px;margin-top:8px;font-weight:600} .tag{display:inline-block;background:var(--red-l);color:var(--red-d);border-radius:20px;padding:2px 10px;font-size:11.5px;font-weight:700} .btn{border:0;background:var(--red);color:#fff;border-radius:10px;padding:12px 20px;font-weight:700;font-size:14.5px;cursor:pointer;font-family:inherit} .btn:disabled{opacity:.45;cursor:not-allowed} .fld{margin-bottom:13px} .fld label{display:block;font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:5px} input,select,textarea{width:100%;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px;background:var(--w);color:var(--ink)} input:focus,select:focus,textarea:focus{outline:2px solid var(--foco);outline-offset:1px;border-color:var(--foco)} /* O campo com erro mantém o vermelho — agora que ele não é mais a cor do foco, ele VOLTA a significar alguma coisa. A classe é posta pela página que validou. */ input.erro-campo,select.erro-campo,textarea.erro-campo{border-color:var(--red)} input.erro-campo:focus,select.erro-campo:focus,textarea.erro-campo:focus{outline-color:var(--red)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} @media(max-width:560px){.grid2{grid-template-columns:1fr}} /* ---------- O palco do par de painéis (04/11/2026) ---------- O portal de inscrição e a área do candidato passaram a usar a MESMA superfície da tela de entrada, do simulador de bolsas e da Jornada: painel escuro com a frase da instituição de um lado, formulário do outro. A superfície vem de `superficie.css`; aqui fica só o palco em que ela se apoia, e a largura que estas duas pedem. Quem chega por um link encaminhado precisa ver de quem é a página antes de saber o que ela é — e agora vê pelo painel, não por uma faixa vermelha com o logo. */ .pub-palco{min-height:100vh;display:flex;flex-direction:column;justify-content:center; padding:28px 18px calc(28px + env(safe-area-inset-bottom));box-sizing:border-box} .pub-palco .auth-split{--form-max:462px} .pub-palco .rodape{padding:20px 0 0} /* O CARTÃO SOME DENTRO DO PALCO. O cartão agora é o `.auth-split` inteiro, e uma moldura com borda e sombra dentro dele seriam duas molduras aninhadas — uma a mais. As páginas continuam escrevendo `.card` nos seus blocos, e é aqui que ele vira só um espaçamento: trocar a marcação de dezenas de trechos para dizer a mesma coisa seria churn, não desenho. */ .pub-palco .card{background:none;border:0;border-radius:0;padding:0;margin:0 0 14px} .pub-palco .card:last-child{margin-bottom:0} /* O logotipo da instituição, no alto da metade branca. */ .pub-marca{display:block;max-height:34px;width:auto;margin-bottom:22px} /* Título e linha de apoio da página, no padrão da tela de entrada. */ .pub-titulo{font-family:var(--titulo);font-size:23px;font-weight:700;letter-spacing:-.4px; line-height:1.2;margin:0 0 6px} .pub-apoio{font-size:13.5px;color:var(--ink3);line-height:1.6;margin:0 0 16px} /* AS GRADES OBEDECEM À COLUNA, e não à janela. Dentro do painel a coluna tem ~400px mesmo num monitor de 1440: uma grade de três colunas ali fica com 120px por campo, e a consulta de largura da JANELA nunca dispararia para desfazê-la. `@container` pergunta à coluna. */ .pub-palco .auth-form{container-type:inline-size} /* Dois limites diferentes porque são grades diferentes: CPF e data de nascimento cabem lado a lado em 190px cada; três colunas de nota do Enem, não. */ /* O seletor leva `.pub-palco` junto por PESO: as páginas declaram as grades delas no `