/* Componentes só da plataforma. * * O visual vem de css/.css — este arquivo não define cor nem fonte * próprias: usa os mesmos tokens do site (--papel, --tinta, --indigo-700, * --magenta-*). Se um valor cru aparecer aqui, é bug: significa que a * plataforma começou a ter identidade própria, que é justamente o que deixou * o painel da 11ª edição com cara de outro produto. */ /* ---------- esqueleto ---------- */ /* O rodapé encosta no fim da janela quando a página é curta. * * No site isso nunca aparece: toda página tem conteúdo de sobra. Aqui, não — * a tela de entrada é uma caixa de login e pouco mais, e sem isto a faixa * índigo termina no meio do vazio, com o papel embaixo dela. * * Empurrar com min-height no
exigiria adivinhar a altura do topo e do * rodapé. Esta é a versão que não adivinha: a coluna ocupa a janela inteira e * o
fica com a sobra, seja ela qual for. * * dvh, e não vh, por causa da barra do navegador no celular, que muda de * altura ao rolar e faria o rodapé saltar. * * O .pular é position:absolute, então continua fora do fluxo e não vira um * item do flex. */ body { min-height: 100dvh; display: flex; flex-direction: column; } body > main { flex: 1 0 auto; } /* ---------- cartão de prazo ---------- */ /* A condição que decide quem pode. Índigo sobre uma barra do mesmo índigo: * destaca sem gritar, e sem gastar o magenta, que nesta interface significa * «a ação é aqui» e não «atenção». * * 9,22:1 sobre o papel do cartão. */ .prazo-nota { font-size: var(--fs-sm); font-weight: 700; line-height: 1.45; color: var(--indigo-700); border-left: 3px solid var(--indigo-700); padding: 0.15rem 0 0.15rem 0.7rem; margin-top: 0.7rem; } /* ---------- navegação ---------- */ /* A navbar tem fundo --indigo-900. Os tokens de texto do site (--tinta, * --cinza, --magenta-700) foram calibrados contra o --papel, e sobre o índigo * eles somem: a marca dava 1,13:1, o e-mail 2,37:1 e o Sair 2,28:1, contra os * 4,5:1 que a WCAG AA pede. O pior era o hover do Sair, que caía para 1,13:1 — * ficava MENOS visível ao passar o mouse, o oposto do que um estado * interativo deve fazer. * * A correção não inventa cor: usa a paleta que o site já reserva para fundo * escuro — o #fff dos títulos do rodapé, o #A8ABE0 do texto secundário de lá, * e o --magenta-400, cujo próprio comentário no tema diz "5,53:1 sobre * índigo-900". É para isso que ele existe. */ /* Só na linha larga: abaixo de 980px o tema empilha os itens com `align-items: stretch`, e centrar aqui deixava o grupo «Ajuda» encolhido no meio da lista enquanto os links vizinhos ocupavam a largura toda. */ @media (min-width: 981px) { .plataforma-nav { align-items: center; } } /* Empilhado, o grupo é um item da lista como os outros. */ @media (max-width: 980px) { .plataforma-nav .nav-grupo { width: 100%; } } .plataforma-nav-fim { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; } /* 7,38:1 — secundário, mas legível */ .plataforma-quem { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: #A8ABE0; } .plataforma-avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-block; } .plataforma-avatar--txt { background: var(--indigo-700); color: #fff; font-size: 0.68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.02em; } /* 5,53:1 em repouso, 16,19:1 no hover — o estado ativo sobe, não desce */ .plataforma-sair { font: inherit; font-size: var(--fs-sm); font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; color: var(--magenta-400); text-decoration: underline; } .plataforma-sair:hover { color: #fff; } /* ---------- avisos ---------- */ .aviso { font-size: var(--fs-sm); padding: 0.8rem 1rem; margin-block: 1rem 0; border-left: 4px solid var(--borda); background: var(--superficie); } .aviso--ok { border-left-color: var(--ok); } .aviso--erro { border-left-color: var(--magenta-700); border-left-width: 6px; background: color-mix(in srgb, var(--magenta-700) 9%, var(--papel)); color: var(--tinta); } .aviso--erro .aviso-t { color: var(--magenta-700); font-weight: 800; } /* Informativo, não alarme: o quadro que explica o que o botão ao lado faz. */ .aviso--rascunho { border-left-color: var(--indigo-700); background: var(--papel); } .aviso--rascunho p + p { margin-top: 0.5rem; } /* ---------- entrada ---------- */ .entrada { padding-block: clamp(2.5rem, 7vw, 5rem); } /* ---------- dúvidas ---------- */ /* O link de WhatsApp, onde quer que apareça. O verde é do WhatsApp e fica * inline no SVG do componente, como o do Google: cor de marca de terceiro não * vira token da casa. */ .zap { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; color: var(--indigo-700); text-decoration: none; white-space: nowrap; } .zap:hover { color: var(--tinta); text-decoration: underline; } /* O cartão de central de dúvidas, na tela de entrada. * * Os contatos ficam só ali: quem já entrou não volta ao login para achar um * telefone, e repeti-los no hub competia com os cartões de prazo, que são o * que a pessoa foi ver. * * Um cartão por linha. Em duas colunas os nomes das pró-reitorias quebravam * no meio — «Pró-Reitoria de Pesquisa e Pós-/Graduação» — e o cartão da * assistência estudantil, que tem dois números e o nome mais longo, ficava * muito mais alto que o vizinho. Empilhados, cada um ocupa a largura de que * precisa e a leitura desce numa coluna só. * * Não são cliques concorrentes — cada um serve a uma área — então o cartão * inteiro não vira link; o número é que leva. */ .contatos-grade { display: grid; gap: 0.75rem; margin-top: 0.75rem; grid-template-columns: 1fr; } .contato-card { border: 1px solid var(--borda); background: var(--superficie); padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } /* A central do Hub, na entrada: filete magenta e fundo do papel, para se * separar das quatro por área sem virar outro componente. */ .contato-card--destaque { background: var(--papel); border-left: 3px solid var(--magenta-500); } .contato-area { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--cinza); line-height: 1.35; } .contato-nums { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 1.05rem; } .contato-setor { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.4; } /* Os quatro cartões do hub. Mesma casca dos cartões de prazo, para não * inventar um segundo jeito de desenhar cartão. */ /* Contato de suporte, logo abaixo do card de entrada. Discreto: é rede de * segurança, não chamada para ação — a ação é o botão do Google, acima. * O verde é do WhatsApp e fica inline no SVG, como o do Google: cor de marca * de terceiro não vira token da casa. */ .entrada-ajuda { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--borda); } .entrada-ajuda-t { font-size: clamp(1.05rem, 2.2vw, 1.25rem); font-weight: 800; letter-spacing: -0.015em; color: var(--tinta); margin-bottom: 0.75rem; } .entrada-ajuda-sub { font-size: var(--fs-xs); color: var(--cinza); margin-top: 1.25rem; } /* Duas colunas quando cabe: a entrada à esquerda, as regras à direita. * * O ponto de quebra é 1000px, e não os 760/820px do site, porque aqui as duas * colunas têm peso — a caixa de entrada já mede 34rem, e espremer a lista de * editais ao lado dela antes disso deixa as duas ruins. Abaixo disso a lista * desce, e quem está no celular vê primeiro o que veio fazer: entrar. * * align-items:start impede que a caixa de entrada estique até a altura da * lista, que é bem mais alta. */ .entrada-grade { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; } /* A coluna esquerda é um item só do grid: entrar, e a quem recorrer. */ .entrada-col { min-width: 0; } @media (min-width: 1000px) { .entrada-grade { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); } } /* A lista é referência, não leitura corrida: corpo menor que o da entrada, e * separada por um filete em vez de uma segunda caixa — duas caixas lado a lado * competiriam, e a que importa é a da esquerda. */ /* Sem filete. Na tela de entrada o magenta marca «este é o que importa» — o * card de login, e o cartão do Hub JIEPE entre os contatos. Nesta coluna, que * é referência e não ação, ele não dizia nada: virava enfeite, e ao aparecer * em três lugares esvaziava o sentido dos outros dois. * * A coluna não precisa de âncora: o próprio

abre a leitura. */ .entrada-regras { padding-top: 0.35rem; } .entrada-regras-t { font-size: clamp(1.05rem, 2.2vw, 1.25rem); font-weight: 800; letter-spacing: -0.015em; } .entrada-regras-d { color: var(--cinza); font-size: var(--fs-sm); line-height: 1.55; margin-top: 0.5rem; } .entrada-regras-area { margin-top: 1.5rem; } /* Índigo, e não magenta, pela mesma razão do filete — e de quebra sobe de * 6,83:1 para 9,22:1 sobre o papel. */ .entrada-regras-area h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--indigo-700); display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } .entrada-regras-area ul { margin: 0.6rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; } .entrada-regras-area li { font-size: var(--fs-sm); line-height: 1.5; color: var(--tinta); } .entrada-regras-pend { font-size: 0.65rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--alerta); } .entrada-regras-fonte { margin-top: 1.75rem; font-size: var(--fs-sm); } .entrada-regras-fonte a { color: var(--indigo-700); font-weight: 700; } /* O card de entrada é a única ação da tela, e precisa parecer isso. * * Antes ele era --superficie sobre --papel: mais ESCURO que a página, o que * lê como recuo, não como elevação. Agora é branco sobre o papel lavanda — * a diferença de valor é pequena, e é a sombra que vende a elevação. * * O filete magenta no topo é o mesmo recurso do cartão do Hub JIEPE nas * dúvidas, então a tela tem um só jeito de dizer «este aqui importa». * * A sombra é tingida de --indigo-900 (23,26,79) em vez de preto: sombra preta * sobre papel com viés violeta acinzenta a página inteira. */ .entrada-caixa { max-width: 34rem; background: #fff; border: 1px solid var(--borda); border-top: 3px solid var(--magenta-500); box-shadow: 0 1px 2px rgba(23, 26, 79, 0.05), 0 10px 28px -10px rgba(23, 26, 79, 0.16); padding: clamp(1.5rem, 4vw, 2.5rem); } .entrada-t { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 800; letter-spacing: -0.02em; margin: 0.35rem 0 0.6rem; } .entrada-d { color: var(--cinza); line-height: 1.55; margin-bottom: 1.5rem; } /* São dois parágrafos desde 21/09: o que vale para todo mundo, e o que muda para quem envia resumo. Entre eles o respiro é menor que o que separa o texto do botão. Sem `:has()` ficam os dois com o respiro maior, que é só mais espaço. */ .entrada-d:has(+ .entrada-d) { margin-bottom: 0.8rem; } /* O botão do Google segue a especificação da Google, e não a paleta da casa. * Não é preciosismo de marca: sobre o --magenta-500 do .btn-p, três das quatro * cores do «G» sumiam — vermelho 1,01:1, azul 1,11:1, verde 1,29:1. O logo * virava uma mancha. A regra da Google diz o mesmo por escrito: o ícone * colorido só pode aparecer sobre fundo claro, escuro ou neutro. * * Este é o modo «light» de lá: preenchimento branco, traço cinza, e o «G» com * o branco atrás que ele precisa. O espaçamento é o especificado para web — * 12px antes do logo, 10px entre logo e texto, 12px depois. * * Perde-se o rosa no botão principal, e está certo perder: a tela de entrada * tem uma ação só, que não precisa competir com nada. O hover escurece o * traço, para o estado ativo subir de contraste em vez de descer. */ .btn-google { background: #fff; color: var(--tinta); border: 1px solid #747775; padding: 0 12px; min-height: 40px; gap: 10px; } .btn-google:hover { background: #F7F8F8; border-color: var(--tinta); } /* São duas notas desde 21/09: a da senha e a de quem não tem @gmail. Entre elas o respiro é menor que o que as separa do botão. */ .entrada-nota + .entrada-nota { margin-top: 0.55rem; } .entrada-nota { font-size: var(--fs-xs); color: var(--cinza); margin-top: 1.1rem; line-height: 1.5; } /* ---------- hub ---------- */ .hub-cabeca { padding-block: clamp(1.75rem, 4vw, 2.75rem) 0.5rem; } .hub-t { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; margin: 0.3rem 0 0.5rem; } /* * O título de um trabalho não é uma manchete. * * O `.hub-t` foi feito para «Meus resumos» e «Novo resumo» — três palavras. * Aqui ele recebe o título registrado no UFTMnet, que passa dos cem * caracteres e vem em caixa alta, e a manchete virava seis linhas de parede * antes de a pessoa chegar ao formulário. O corpo menor é o que devolve o * título ao papel de identificação. * * A caixa alta fica: o título tem de aparecer como está no edital. Mas ela * pesa, então aqui o peso cai para 700 e o entreletra volta ao normal — o * aperto negativo do `.hub-t` foi desenhado para maiúsculas grandes, e em * corpo pequeno só embola. */ /* A segunda lista da página: menor que o título dela, e com ar antes, para se ler como outra seção e não como outro «Meus resumos». */ .hub-t--secao { font-size: clamp(1.05rem, 2vw, 1.35rem); letter-spacing: -0.01em; margin-top: 2.5rem; } /* `pretty` e não `balance`: `balance` iguala o comprimento das linhas, e num título de duas linhas isso deixa a primeira pela metade com espaço de sobra à direita — lê como quebra errada. `pretty` enche a linha e só cuida de não deixar palavra órfã na última. */ .hub-t--trabalho { font-size: clamp(0.9rem, 1.1vw, 1rem); font-weight: 700; line-height: 1.4; letter-spacing: 0; text-wrap: pretty; } /* `max-width: none` porque o `2026.css` põe 60ch aqui — lá o `.hub-d` é a descrição do cartão do Hub na home do site, dentro de uma coluna estreita. Aqui é a linha de data debaixo do título da edição, e parava a 615px numa página de 1084px. É a colisão que o CLAUDE.md já apontava: carregar depois só vence nas propriedades que se redeclara, e esta faltava. */ .hub-d { color: var(--cinza); line-height: 1.5; max-width: none; } .prazos { padding-block: 1.5rem; } .prazos-t { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 800; color: var(--cinza); margin-bottom: 0.85rem; } .prazos-grade { display: grid; gap: 0.7rem; grid-template-columns: 1fr; } @media (min-width: 620px) { .prazos-grade { grid-template-columns: 1fr 1fr; } } @media (min-width: 980px) { .prazos-grade { grid-template-columns: repeat(3, 1fr); } } .prazo { border: 1px solid var(--borda); background: var(--superficie); padding: 0.95rem 1.05rem 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; } .prazo-estado { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cinza); } .prazo--aberto { border-color: var(--indigo-700); background: var(--papel); } .prazo--aberto .prazo-estado { color: var(--ok); } .prazo--fechado { opacity: 0.62; } .prazo-t { font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; } .prazo-d { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.45; } /* O pé do cartão, colado na base: com descrições de tamanhos diferentes, o que vinha depois delas desalinhava entre um cartão e o vizinho. A folga sobra no meio, onde não incomoda. */ .prazo-fim { margin-top: auto; display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.9rem; } .prazo-quando { font-size: var(--fs-xs); color: var(--cinza); } /* ---------- a coluna de conteúdo das telas internas ---------- */ /* * Uma moldura só, em toda tela: os 1180px do `.wrap`, encolhendo com a janela. * * Antes cada tela tinha a sua — 42rem no perfil, 52rem nas de resumo, 1180 no * início —, e a borda esquerda pulava a cada item do menu. Quem precisa de * medida curta é o texto, e ele já se limita por conta própria: o título do * cartão em 62 caracteres, a ficha em 74. */ .pagina { padding-block: clamp(1.75rem, 4vw, 2.75rem) 3rem; } /* ---------- perfil ---------- */ .perfil { padding-block: clamp(1.75rem, 4vw, 2.75rem) 3rem; } .perfil-form { display: grid; gap: 0.35rem; margin-top: 1.25rem; } .perfil-form label { font-size: var(--fs-sm); font-weight: 700; margin-top: 0.75rem; } .perfil-form input { font: inherit; padding: 0.65rem 0.8rem; border: 1px solid var(--borda); background: var(--papel); color: var(--tinta); } .perfil-form input:disabled { background: var(--superficie); color: var(--cinza); } .perfil-form button { margin-top: 1.25rem; justify-self: start; } .campo-erro { font-size: var(--fs-xs); color: var(--magenta-700); font-weight: 700; } .campo-nota { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.45; } /* Asterisco com legenda no alto do bloco. Ele é `aria-hidden`, e quem usa leitor de tela ouve «obrigatório» do próprio campo, pelo `aria-required` — sem isso a tela diria «asterisco» e não significaria nada. */ .obrig { font-weight: 800; color: var(--magenta-700); margin-left: 0.15rem; } /* No alto e à direita do bloco, no mesmo rosa do asterisco que ela explica — cinza faria a legenda parecer nota de rodapé, e o par não se reconheceria. */ .form-bloco-legenda { margin-left: auto; font-size: var(--fs-xs); font-weight: 700; color: var(--magenta-700); letter-spacing: 0; } /* Onde ela divide o alto com «Como escrever», o botão é que empurra. */ .form-bloco-ajuda + .form-bloco-legenda { margin-left: 0.8rem; } .perfil-sub { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 800; color: var(--cinza); margin-top: 2.5rem; } /* O perfil é uma pilha de partes independentes — seus dados, as contas ligadas, para onde a JIEPE escreve, onde você aparece no UFTMnet —, e o título de cada uma carrega o risco que a separa da anterior. Espaço igual dos dois lados: a linha divide, não pertence ao que vem depois dela. Só aqui: `.perfil-sub` também titula parte em `submissions/show`, `workshops/show` e no painel, e lá o risco não foi pedido. Título e linha em magenta, mas não no mesmo magenta: o traço leva o gráfico (`--magenta-500`, 3,80:1 — o mesmo de `.marco--chave`, que já é linha no site), e o título leva o de texto (`--magenta-700`, 6,83:1). Trocar os dois deixaria o título abaixo do mínimo de leitura. */ .perfil .perfil-sub { padding-top: 2.5rem; border-top: 1px solid var(--magenta-500); color: var(--magenta-700); } .perfil-contas { list-style: none; padding: 0; margin-top: 0.75rem; display: grid; gap: 0.5rem; } .perfil-contas li { border: 1px solid var(--borda); padding: 0.75rem 0.9rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; font-size: var(--fs-sm); } .perfil-contas span { color: var(--cinza); font-size: var(--fs-xs); } /* Quem apresenta, na autoria: é o nome que a comissão procura para montar a sessão, e no cinza das outras marcas ele se perdia. Magenta-700 e não o 500, que não passa 4,5:1 em texto. */ .perfil-contas .autor-apresenta { color: var(--magenta-700); font-weight: 700; display: inline-flex; align-items: center; gap: 0.3rem; align-self: center; } .autor-apresenta svg { flex: none; } /* A bolsa é a pergunta da PROEXT: em índigo, para se achar na lista sem competir com o magenta de quem apresenta. */ .perfil-contas .autor-bolsa { color: var(--indigo-700); font-weight: 700; } /* ---------- a régua dos passos ---------- */ /* * O formulário tem cinco seções e mostrava as cinco de uma vez: quem abria * via uma parede e não sabia quanto faltava. A régua é o que transforma a * mesma sequência em caminho — diz onde se está, o que já ficou pronto e o * que ficou pendente atrás. * * Ela reusa a linguagem que o formulário já tinha: o número em quadrado, que * é o `.form-bloco-n` dos títulos das seções. */ /* * Cinco colunas iguais, sempre. Em `flex-wrap` a régua quebrava em duas * linhas assim que a soma dos rótulos passava da largura, e uma régua de * progresso em duas linhas deixa de ser régua. Na grade a quebra é * impossível: o que cede é o conteúdo da célula, nunca o número de linhas. * * `minmax(0, 1fr)` e não `1fr`: sem o mínimo zero a célula se recusa a * encolher abaixo do conteúdo, e é exatamente aí que a grade estouraria para * fora da coluna. */ .passos { scroll-margin-top: 1rem; } .passos ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; } .passo { min-width: 0; display: flex; } .passo button { font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; width: 100%; min-width: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--papel); color: var(--tinta); border: 1px solid var(--borda); padding: 0.4rem 0.5rem; } .passo button:hover:not(:disabled) { border-color: var(--indigo-700); } /* Passo adiante do que se alcançou: visível, para saber que existe; apagado, para não convidar. */ .passo button:disabled { cursor: default; color: var(--cinza-fraco); background: transparent; border-style: dashed; } .passo-n { font-family: var(--mono); font-size: 0.7rem; font-weight: 800; width: 1.45rem; height: 1.45rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid currentColor; } .passo--atual button { background: var(--indigo-700); color: #fff; border-color: var(--indigo-700); } .passo--atual .passo-n { border-color: rgba(255, 255, 255, 0.55); } .passo--pronto button { border-color: var(--indigo-700); color: var(--indigo-700); } .passo--pendente button { border-color: var(--alerta); } .passo-selo { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; flex: none; } .passo-selo--ok { color: var(--ok); } .passo-selo--falta { color: var(--alerta); } /* O rótulo encolhe com a tela em vez de quebrar a linha, e some antes de apertar o número: abaixo de 680px cinco rótulos não cabem em largura nenhuma, e o título da seção logo abaixo já nomeia onde se está. O selo «falta» sai junto — a borda âmbar diz a mesma coisa sem ocupar espaço. O corte é 680 porque o rótulo mais longo tem doze caracteres; era 720 quando um dos botões ainda vestia o título inteiro da seção. */ .passo-t { font-size: clamp(0.66rem, 1.5vw, var(--fs-sm)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 679px) { .passo-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .passo button { padding: 0.4rem 0.25rem; } } /* «incompleto» tem dez caracteres e só cabe ao lado do rótulo na coluna inteira; abaixo disso a borda âmbar diz o mesmo sem ocupar largura. O «✓» fica em qualquer largura, porque é um caractere. */ @media (max-width: 899px) { .passo-selo--falta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* ---------- formulário de resumo ---------- */ /* Sem largura própria: as telas internas usam a moldura da página, os mesmos 1180px do `.wrap`, encolhendo com a janela. */ .form-resumo { padding-bottom: 4rem; display: grid; gap: 1.75rem; } .form-bloco { border: 1px solid var(--borda); background: var(--superficie); padding: 1.25rem 1.35rem 1.5rem; } .form-bloco-t { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.015em; display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; } .form-bloco-n { font-family: var(--mono); font-size: 0.72rem; font-weight: 800; color: #fff; background: var(--indigo-700); width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; } .form-resumo label { display: block; font-size: var(--fs-sm); font-weight: 700; margin-top: 1rem; } /* Todo campo que se digita, e não uma lista de tipos: `number` e `tel` tinham ficado de fora e apareciam com o desenho cru do navegador, no meio de campos vestidos. Marcar e escolher — caixa, botão de rádio, arquivo — não entram, porque não são caixas de texto. */ .form-resumo select, .form-resumo textarea, .form-resumo input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"]) { font: inherit; width: 100%; padding: 0.6rem 0.75rem; margin-top: 0.3rem; border: 1px solid var(--borda); background: var(--papel); color: var(--tinta); } /* Número não precisa da largura de uma frase: «50» num campo de tela inteira parece campo errado. */ .form-resumo input[type="number"] { max-width: 9rem; } .form-resumo textarea { line-height: 1.5; resize: vertical; } .form-resumo select[size] { padding: 0.3rem; } /* A seta do `select`, que o navegador desenha do jeito dele: sem isto, no meio de campos vestidos, a lista parece de outro sistema. */ .jph-form select, .form-resumo select:not([size]) { appearance: none; padding-right: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%232D2B4E' stroke-width='1.6' d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 0.65rem; } /* Campos curtos lado a lado. Área, campus e matéria empilhados em toda a largura da tela leem como formulário de 2003: a linha diz que as três respostas são do mesmo tamanho e da mesma pergunta. */ .form-linha { display: grid; gap: 0 1rem; } @media (min-width: 720px) { .form-linha { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } } /* O primeiro rótulo de um bloco não precisa do respiro que separa um campo do anterior — ali em cima não há campo anterior. */ .form-bloco > label:first-child, .form-linha > label:first-child { margin-top: 0; } /* Contagem no título do bloco: mesma posição da legenda de obrigatórios, sem o rosa dela — «2 de 7» não é exigência, é informação. */ .form-bloco-conta { margin-left: auto; font-size: var(--fs-xs); font-weight: 700; color: var(--cinza); } .opcoes { border: 0; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.4rem; } .opcoes--linha { grid-template-columns: 1fr 1fr; } .opcoes legend { font-size: var(--fs-sm); font-weight: 700; padding: 0; margin-bottom: 0.4rem; } .opcao { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0 !important; border: 1px solid var(--borda); background: var(--papel); padding: 0.65rem 0.8rem; font-weight: 400; cursor: pointer; } .opcao:has(input:checked) { border-color: var(--indigo-700); background: var(--indigo-luz, var(--superficie)); } /* Uma opção sozinha, fora de um `opcoes`: o `margin: 0 !important` acima existe porque lá quem dá o espaço é o `gap` do grid. Solta, ela precisa do seu — e precisa vencer aquele `!important`. */ .opcao--solta { margin: 1.1rem 0 !important; } .opcao input { margin-top: 0.2rem; } .opcao small { display: block; font-size: var(--fs-xs); color: var(--cinza); font-weight: 400; } .opcao small.monitoria-ate { color: var(--magenta-700); font-weight: 700; } /* A área abre o formulário: as opções vêm logo abaixo do título do bloco, sem o respiro que separa um campo do anterior. */ .opcoes--area { margin-top: 0; } .campo-nota--legenda { margin: -0.15rem 0 0.35rem; } /* A que abre um bloco, e não a que explica o campo logo acima: precisa do respiro que a `--legenda` justamente tira. */ .campo-nota--intro { margin: 1.25rem 0 0.35rem; } /* Saídas de uma escolha: lado a lado, soltas da caixa que estão recusando e com folga antes do que vem depois. */ .acoes-secundarias { display: flex; flex-wrap: wrap; gap: 0.35rem 1.6rem; margin: 0.75rem 0 1.5rem; } /* Cada uma com o seu ícone: lado a lado e sublinhadas, as duas viravam uma linha só de rosa. O ícone é onde uma começa e a outra termina. */ .acoes-secundarias .ligacao { display: inline-flex; align-items: center; gap: 0.35rem; } /* A ação que vem depois da caixa do título encostava nela. */ .titulo-herdado + .campo-nota { margin-top: 0.55rem; } /* A pró-reitoria é a etiqueta da área, não o nome dela. */ .opcao-orgao { font-family: var(--mono); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; color: var(--indigo-700); border: 1px solid var(--borda); padding: 0.1rem 0.35rem; margin-left: 0.45rem; white-space: nowrap; } .opcao strong + .opcao-orgao { vertical-align: 0.08em; } .ligacao { font: inherit; font-size: var(--fs-xs); background: none; border: 0; padding: 0; color: var(--magenta-700); text-decoration: underline; cursor: pointer; } .ligacao:hover { color: var(--tinta); } /* Excluir fica com o mesmo peso das outras ações, e não com cara de botão de perigo: o susto está na confirmação, não na cor. O cinza é o que impede o clique distraído — quem procura «excluir» acha, quem não procura não esbarra. */ .ligacao--risco { color: var(--cinza); } .ligacao--risco:hover { color: var(--magenta-700); } .titulo-herdado { margin-top: 0.8rem; padding: 0.7rem 0.85rem; border-left: 3px solid var(--indigo-700); background: var(--papel); font-size: var(--fs-sm); line-height: 1.45; } .titulo-herdado span { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--cinza); font-weight: 800; } .aviso--alerta { border-left-color: var(--alerta); } /* No Início, o aviso divide a página com cartões: sem moldura ele virava uma faixa cinza atravessando a largura toda, sem começo nem fim, e parecia estar fora da coluna em vez de dentro dela. Ganha a borda e o papel dos cartões, e a medida de leitura que o texto pede. */ .aviso--conta { background: var(--papel); border: 1px solid var(--borda); border-left-width: 4px; margin-block: 0; } .prazos--aviso { padding-block: 0.5rem 0; } .aviso--alerta .aviso-t { color: var(--alerta); } .aviso--erro ul { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: var(--fs-sm); } /* autores */ .autores { display: grid; gap: 0.6rem; margin-top: 0.8rem; } /* `baseline` em vez de `start`, e por isso o número não leva mais um `padding-top` calibrado no olho: a linha travada mostra o nome como texto e a editável como input, alturas diferentes, e um recuo fixo só podia acertar uma das duas. Assentado pela base, ele acompanha o nome nas duas. */ .autor { border: 1px solid var(--borda); background: var(--papel); padding: 0.7rem 0.85rem; display: grid; gap: 0.5rem; grid-template-columns: auto 1fr; align-items: baseline; } /* O magenta-700 é o rosa que o 2026.css marca como «acento em texto», 6,83:1. O magenta-500 da barra de navegação é bonito e tem 3,80:1 — não serve para texto de 0,72rem. */ .autor-n { font-family: var(--mono); font-size: 0.72rem; font-weight: 800; color: var(--magenta-700); } .autor-campos { display: grid; gap: 0.4rem; grid-template-columns: 1fr; } /* O erro fica na linha do autor, sob os dois campos da grade. */ .autor-erro { grid-column: 2; margin: 0; } /* «Acrescentar» é ação, e estava com cara de contorno esquecido colado na lista. Ganha o indigo, que é a cor de ação do 2026.css, e um respiro que o separe do último item. Não vira .btn-p nem promove o .btn-n: «Salvar rascunho» divide a barra com «Enviar à comissão», que não pode ter concorrente. */ .btn-mais { background: var(--indigo-700); color: #fff; border-color: var(--indigo-700); margin-top: 1rem; } .btn-mais:hover { background: var(--tinta); border-color: var(--tinta); } /* Três colunas porque o autor do resumo tem três campos: nome, e-mail e instituição. Quem conduz a atividade tem dois, e nessa grade sobrava uma coluna vazia à direita — os campos ficavam estreitos no meio da largura. */ @media (min-width: 700px) { .autor-campos { grid-template-columns: 1.4fr 1.2fr 1fr; } .autor-campos--duplo { grid-template-columns: 1.2fr 1fr; } } .autor-campos input { margin-top: 0 !important; } /* O asterisco mora dentro do campo, e o `placeholder` é o único lugar onde ele cabe — a linha do autor não tem rótulo por cima. No mesmo rosa dos outros, para se reconhecer como a mesma marca. */ .autor-campos input::placeholder { color: var(--cinza); } .autor-orientador { grid-column: 2; display: inline-flex !important; align-items: center; gap: 0.4rem; font-size: var(--fs-xs) !important; font-weight: 700 !important; margin: 0 !important; } .autor-selo { grid-column: 2; font-size: var(--fs-xs); color: var(--cinza); } .autor .ligacao { grid-column: 2; justify-self: start; } /* ---------- o sinal de «leia isto» e o modal das regras ---------- */ /* * As regras do resumo são longas demais para caber acima dos campos: o aviso * que ficava ali dizia três das proibições e calava o resto, e ainda assim * empurrava os campos para baixo. Ficam no modal; o sinal no canto do bloco * é o que diz que existem. * * O âmbar é o mesmo `--alerta` do aviso que saiu — a cor guarda o sentido de * «isto custa caro se você ignorar». */ .form-bloco-ajuda { margin-left: auto; font: inherit; font-size: var(--fs-xs); font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; background: none; color: var(--alerta); border: 1px solid var(--alerta); padding: 0.3rem 0.6rem; } .form-bloco-ajuda:hover { background: var(--papel); } .form-bloco-ajuda-i { font-family: var(--mono); font-weight: 800; line-height: 1; width: 1.05rem; height: 1.05rem; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--alerta); color: var(--papel); } .regras { max-width: 44rem; width: calc(100% - 2rem); max-height: 84vh; overflow-y: auto; border: 1px solid var(--borda); background: var(--papel); color: var(--tinta); padding: 1.4rem 1.6rem 1.75rem; line-height: 1.55; } .regras::backdrop { background: rgba(18, 18, 43, 0.55); } .regras p { margin: 0 0 0.9rem; } .regras-t { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 0.9rem; } .regras-st { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; color: var(--cinza); margin: 1.4rem 0 0.6rem; } .regras-fechar { position: sticky; top: 0; float: right; font: inherit; font-size: 1.3rem; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--cinza); padding: 0 0 0.4rem 0.6rem; } .regras-fechar:hover { color: var(--tinta); } /* Cada parte com o seu tamanho: é a mesma lista que rotula os campos, e vem da mesma constante. */ .regras-partes { margin: 0 0 0.3rem; } .regras-partes dt { font-weight: 700; margin-top: 0.8rem; } .regras-partes dd { margin: 0.1rem 0 0; font-size: var(--fs-sm); color: var(--cinza); } .regras-lista { margin: 0; padding-left: 1.1rem; font-size: var(--fs-sm); } .regras-lista li { margin-bottom: 0.5rem; } .regras-fecho { margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--borda); font-size: var(--fs-sm); color: var(--cinza); } /* contador de palavras */ /* Grade, e não flex: o número ocupa a coluna da esquerda e as duas linhas da direita, centrado contra elas. Em `baseline` ele se alinhava à primeira linha e ficava boiando quando vinha a segunda. */ .contador { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 0.8rem; row-gap: 0.15rem; align-items: center; padding: 0.8rem 1rem; border: 1px solid var(--borda); background: var(--papel); margin-bottom: 1rem; } /* Coluna de largura fixa, e o número centrado nela: em `auto` a coluna crescia de «0» para «297» e o texto ao lado andava para a direita a cada centena. Sem `span 2`: com o alerta oculto não há segunda linha, e mandar o número ocupar duas criava uma linha implícita vazia — ele se centrava sobre a soma e descia uns dez pixels em relação ao texto. Ocupando só a primeira, os dois se centram na mesma altura. */ .contador-v { grid-column: 1; grid-row: 1; align-self: center; text-align: center; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; } .contador-r { grid-column: 2; } .contador-r { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.4; } .contador--ok { border-color: var(--ok); } .contador--ok .contador-v { color: var(--ok); } .contador--fora { border-color: var(--alerta); } .contador--fora .contador-v { color: var(--alerta); } /* Linha própria, e só quando tem o que dizer. */ .contador-alerta { grid-column: 2; font-size: var(--fs-sm); font-weight: 700; color: var(--alerta); } .contador-alerta:empty { display: none; } .campo-resumo { margin-top: 1.25rem; } .campo-resumo .campo-nota { margin-top: 0.15rem; } /* A contagem de cada campo: alinhada à direita, sob o campo, no menor corpo da casa. Quem escreve não deve reparar nela até precisar. */ .campo-conta { font-size: var(--fs-xs); color: var(--cinza-fraco); text-align: right; margin: 0.2rem 0 0; } .campo-tamanho { font-size: var(--fs-xs); color: var(--cinza-fraco); font-weight: 400; } .palavras-chave { display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-top: 0.3rem; } .palavra { display: flex; gap: 0.3rem; align-items: center; } /* Uma por linha: recurso é frase — «sala com cadeiras móveis» —, e não palavra solta como a palavra-chave, para a qual a grade foi feita. */ .palavras-chave--linhas { grid-template-columns: 1fr; } /* No alto da lista, as portas precisam de ar embaixo, e não em cima: o parágrafo do prazo vem logo acima delas. */ .acoes-form--topo { margin: 0.9rem 0 1.5rem; } /* Marcar vários, e não escolher um: cabem lado a lado, porque a lista é de itens curtos e empilhá-los faria sete linhas de nada. */ /* Marcar quantos couberem: os sete públicos, as listas de recursos. * * Duas colunas, e não quantas couberem. Com `auto-fit` a tela larga abria * quatro, e aí «Estudantes de pós-graduação» quebrava em duas linhas e * esticava a fileira inteira — três caixas com um palmo de vazio embaixo do * texto, por causa de uma que não coube. Em duas colunas nenhum rótulo * quebra, e a explicação de quem tem uma cabe ao lado do nome. * * Sete são ímpares, e o último ficaria sozinho num canto — buraco que lê como * opção que não carregou. Ele ocupa a linha, como já fazem os atalhos do * painel. `of-type` porque a legenda e a nota também são filhas do * `fieldset`: contando todas, a conta muda se a nota sair. */ .opcoes--marcar { display: grid; gap: 0.4rem; align-content: start; } .opcoes--marcar legend, .opcoes--marcar > .campo-nota { grid-column: 1 / -1; } @media (min-width: 680px) { .opcoes--marcar { grid-template-columns: 1fr 1fr; } .opcoes--marcar label.opcao:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; } } /* Dois campos que se lêem juntos: duração e vagas, orientador e e-mail. */ .dupla { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } .palavra input { margin-top: 0 !important; } /* ODS */ .ods-escolhidas { list-style: none; padding: 0; margin: 0.9rem 0 1rem; display: grid; gap: 0.4rem; counter-reset: none; } .ods-escolhidas li { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; border: 1px solid var(--borda); background: var(--papel); border-left: 5px solid var(--cor); font-size: var(--fs-sm); } .ods-pos { font-size: var(--fs-xs); color: var(--cinza); font-weight: 700; min-width: 1.6rem; } .ods-n { background: var(--cor); color: #fff; font-weight: 800; font-size: var(--fs-xs); padding: 0.15rem 0.4rem; min-width: 1.5rem; text-align: center; } .ods-nome { flex: 1; } /* Subir e descer é o mesmo gesto nas ODS e na autoria, então é o mesmo botão. */ .ods-acoes, .autor-ordem { display: flex; gap: 0.15rem; } .ods-acoes button, .autor-ordem button { font: inherit; font-size: var(--fs-sm); background: none; cursor: pointer; border: 1px solid var(--borda); width: 1.7rem; height: 1.7rem; color: var(--tinta); } .ods-acoes button:hover:not(:disabled), .autor-ordem button:hover:not(:disabled) { border-color: var(--indigo-700); } .ods-acoes button:disabled, .autor-ordem button:disabled { opacity: 0.3; cursor: default; } .ods-vazio { font-size: var(--fs-sm); color: var(--cinza); font-style: italic; margin: 0.9rem 0; } /* A instrução do passo, levantada da nota de rodapé. Papel dentro de um bloco de superfície, com o filete índigo da casa: o texto se destaca sem inventar cor, e volta ao corpo normal — nota cinza em --fs-xs é justamente o que se pula. */ .ods-chamada { background: var(--papel); border: 1px solid var(--borda); border-left: 4px solid var(--indigo-700); padding: 0.9rem 1.1rem; margin: 1rem 0 0; } .ods-chamada p { font-size: var(--fs-sm); line-height: 1.55; margin: 0; } .ods-chamada p + p { margin-top: 0.6rem; } /* No rosa dos «obrigatórios» dos outros passos: é a mesma exigência, ainda que aqui ela recaia sobre a resposta e não sobre um campo. */ .ods-exigido { border-top: 1px solid var(--borda); padding-top: 0.6rem; color: var(--magenta-700); } .ods-exigido strong { font-weight: 800; } /* ---------- ODS no painel: quantos resumos tocam cada objetivo ---------- */ /* * Quatro colunas: número, nome, barra, total. A barra é comparação entre * linhas — qual objetivo a JIEPE toca e qual não —, e por isso é proporcional * ao maior, e não ao total de resumos. * * Ela some no estreito: dezoito nomes e dezoito números já cabem, e a barra * espremida a 30px não compara nada. */ .ods-quadro .admin-linha { grid-template-columns: auto 1fr auto; } .ods-conta { align-items: center; } /* Todos os selos com a mesma largura: com o mínimo, o «1» fica mais estreito que o «18» e os dezoito nomes começam em pontos diferentes. */ .ods-conta .ods-n { align-self: center; min-width: 2rem; } .ods-conta-barra { display: none; } .ods-conta-barra > span { display: block; height: 0.5rem; width: var(--l); background: var(--cor); } .ods-conta--nenhum .ods-n { background: none; color: var(--cinza); border: 1px solid var(--borda); } @media (min-width: 720px) { .ods-quadro .admin-linha { grid-template-columns: auto minmax(0, 1fr) 7rem auto; } .ods-conta-barra { display: block; background: var(--superficie); height: 0.5rem; } } /* ---------- ODS: uma linha por objetivo, que abre ---------- */ /* * O selo vem antes do nome porque é o selo que a JIEPE quer que as pessoas * passem a reconhecer, e ele se lê antes de qualquer texto. Os dezoito SVG * oficiais são os do site, copiados como o 2026.css. * * Em linha, e não em grade de cartas: a linha aberta cabe o enunciado e as * metas ali mesmo, sem levar a pessoa a outro lugar da página. Um aberto por * vez, e o estado é do servidor — acordeão de `
` seria fechado pelo * próximo salvamento automático. * * A cor do objetivo fica na borda e em mais nada: das dezoito, várias são * claras demais para texto — o amarelo do 7 dá menos de 2:1 sobre o papel. */ .ods-lista { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.3rem; } .ods-item { border: 1px solid var(--borda); background: var(--papel); border-left: 4px solid var(--cor); } .ods-item--aberto { border-color: var(--cor); } .ods-linha { font: inherit; width: 100%; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.7rem; background: none; border: 0; color: var(--tinta); } .ods-linha:hover { background: var(--superficie); } .ods-linha img { width: 2.6rem; height: 2.6rem; flex: none; } .ods-linha-n { font-size: var(--fs-xs); font-weight: 800; color: var(--cinza); min-width: 1.4rem; flex: none; } .ods-linha-t { flex: 1; font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; } .ods-linha-x { font-family: var(--mono); font-size: 1.1rem; color: var(--cinza); flex: none; } .ods-corpo { padding: 0.2rem 0.9rem 1rem 0.9rem; border-top: 1px solid var(--borda); } .ods-corpo-d { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.5; margin: 0.8rem 0 0; } .ods-corpo-p { font-size: var(--fs-sm); font-weight: 700; margin: 1rem 0 0.5rem; } .ods-corpo-p .campo-nota { display: inline; font-weight: 400; margin-left: 0.4rem; } .ods-corpo .btn-mais { margin-top: 1rem; } /* * Colunas de texto, e não grade. * * Na grade as metas se pareavam em linhas, e bastava uma quebrar em duas * linhas para a vizinha ganhar um buraco embaixo — o ritmo vertical ficava * esburacado e o olho tinha de ziguezaguear. Em `columns` o conteúdo escorre: * lê-se 3.1 a 3.7 numa coluna e 3.8 a 3.d na outra, sem vão nenhum. * * `columns: 17rem` também dispensa media query — são quantas colunas * couberem, e uma só no telefone. */ .ods-metas { list-style: none; margin: 0; padding: 0; columns: 24rem; column-gap: 2rem; } .ods-metas li { break-inside: avoid; margin-bottom: 0.35rem; } /* A meta é clicável, e escolhê-la traz o objetivo junto: é o caminho bom, e deixa registrado por que a pessoa escolheu. */ /* * A meta é uma escolha, e precisava parecer uma. * * Sem marca ela se lia como verbete — assunto em destaque, texto oficial em * cinza, nenhum sinal de que dava para clicar; só uma frase acima dizendo que * dava. A bolinha anuncia «uma destas» antes de qualquer texto. */ .ods-meta { font: inherit; font-size: var(--fs-sm); line-height: 1.35; text-align: left; cursor: pointer; width: 100%; display: flex; gap: 0.55rem; align-items: baseline; padding: 0.45rem 0.55rem; background: none; border: 1px solid transparent; color: var(--tinta); } .ods-meta-marca { flex: none; width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 2px solid var(--cinza-fraco); align-self: flex-start; margin-top: 0.2rem; } .ods-meta:hover:not(:disabled) .ods-meta-marca, .ods-meta:focus-visible .ods-meta-marca { border-color: var(--cor); box-shadow: inset 0 0 0 3px var(--cor); } /* O rótulo é a âncora; o texto oficial embaixo é a leitura. Os dois no mesmo botão, porque escolher e ler não podem ser gestos separados. */ .ods-meta-txt { display: block; } .ods-meta-txt strong { display: block; font-weight: 700; } .ods-meta-txt small { display: block; margin-top: 0.15rem; font-size: var(--fs-xs); font-weight: 400; color: var(--cinza); line-height: 1.45; } .ods-meta:hover:not(:disabled), .ods-meta:focus-visible { border-color: var(--cor); background: var(--superficie); } .ods-meta:disabled { cursor: default; opacity: 0.5; } .ods-meta-n { font-size: var(--fs-xs); font-weight: 800; min-width: 2.2rem; flex: none; } /* Meta com letra é meio de implementação — dinheiro, tecnologia, capacitação. Continua na lista, porque há trabalho que é sobre isso, mas em segundo plano. */ .ods-meta--meio { color: var(--cinza); } /* A meta apontada, dentro do objetivo já escolhido. */ .ods-meta-escolhida { display: block; margin-top: 0.15rem; font-size: var(--fs-xs); font-weight: 400; color: var(--cinza); } .ods-meta-escolhida .num { font-weight: 800; } /* Em `--fs-xs` sobre cinza a nota de rodapé ficava ilegível; ela explica de onde vem tudo o que está acima, e merece o corpo do texto. */ .ods-fonte { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.5; margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--borda); } .ods-fonte a { color: var(--indigo-700); } /* «Nenhum objetivo se aplica»: fica depois dos dezoito, porque é resposta de quem leu, e não atalho de quem quer passar adiante. */ .ods-nenhum { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--borda); } .ods-nenhum .campo-nota { margin-bottom: 0.5rem; } .ods-nenhum-t { font-size: var(--fs-sm); margin: 0 0 0.4rem; } /* «Nenhuma destas»: o último recurso, depois de toda a lista, e não um botão ao lado dela — quem chega aqui passou os olhos por tudo. */ .ods-nenhuma { display: inline-block; margin-top: 0.9rem; font-size: var(--fs-sm); } .ods-nota { margin-top: 0.9rem; } .ods-nota label { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 0.35rem; } .ods-nota textarea { font: inherit; width: 100%; padding: 0.6rem 0.75rem; line-height: 1.5; border: 1px solid var(--borda); background: var(--papel); color: var(--tinta); } .ods-nota-acoes { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-top: 0.7rem; } .ods-nota-acoes .btn-mais { margin-top: 0; } /* A indicação da coordenação marca a linha, e não a escolhe. */ .ods-indicado { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; color: var(--indigo-700); border: 1px solid var(--borda); padding: 0.15rem 0.4rem; flex: none; } /* A indicação que veio do registro do projeto, dita como indicação. */ .ods-sugestao { border: 1px solid var(--borda); background: var(--papel); padding: 0.9rem 1.1rem 1.1rem; margin-top: 1rem; } .ods-sugestao-t { font-size: var(--fs-sm); font-weight: 700; margin: 0 0 0.6rem; } .ods-selos { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; } .ods-selos img { width: 3.5rem; height: 3.5rem; } /* A leitura automática, na tela do parecer. Reaproveita a caixa `.ods-sugestao` acima — é a mesma natureza, indicação com procedência dita —, mas as linhas têm classe própria e prefixada. A primeira versão usava `.ods-par*`, que pelo nome pareciam servir e são do `2026.css`, a folha do site: trazem `display:grid` de duas colunas para três filhos, um `.ods-par > div` que forçaria coluna no texto, e um `.ods-par-selo` desenhado para envolver o `img` em vez de ser ele. Não daria erro; sairia torto. */ .ods-ia-item { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0; border-top: 1px solid var(--borda); } .ods-ia-item:first-child { border-top: 0; padding-top: 0; } .ods-ia-selo { width: 2.75rem; height: 2.75rem; flex: none; } /* `min-width: 0` para a justificativa quebrar em vez de estourar a linha, e a base de 14rem para ela cair sozinha numa linha própria no celular. */ .ods-ia-txt { flex: 1 1 14rem; min-width: 0; } .ods-ia-txt strong { display: block; font-size: var(--fs-sm); } .ods-ia-txt .campo-nota { margin: 0.25rem 0 0; } .ods-ia-item .btn { margin-left: auto; flex: none; } /* O confronto entre a escolha do autor e a leitura automática, dito nos dois desfechos: divergir pede atenção, coincidir confirma — e confirmar também é informação para quem vai escrever ao autor. Os tokens são os mesmos de `.aviso--ok` e `.aviso--erro`, logo acima neste arquivo. Cor própria aqui seria um terceiro vocabulário cromático numa tela que já tem dois, e ninguém saberia o que o laranja novo quer dizer. */ .ods-ia-confronto { font-size: var(--fs-sm); line-height: 1.5; margin: 0 0 0.9rem; padding: 0.5rem 0 0.5rem 0.75rem; border-left: 3px solid var(--borda); } .ods-ia-confronto--difere { border-left-color: var(--alerta); } .ods-ia-confronto--coincide { border-left-color: var(--ok); } /* O selo dentro do objetivo já escolhido. */ .ods-escolhidas .ods-selo { width: 2.75rem; height: 2.75rem; flex: none; } .ods-disponiveis { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; } .ods-botao { font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; background: var(--papel); color: var(--tinta); border: 1px solid var(--borda); border-left: 4px solid var(--cor); padding: 0.35rem 0.6rem; text-align: left; } .ods-botao:hover { border-color: var(--indigo-700); border-left-color: var(--cor); } .ods-botao .num { color: var(--cor); font-weight: 800; } /* O respiro antes do botão. Dentro de um bloco, ele vinha logo abaixo do último campo, colado nele — e botão colado no campo parece parte do campo. */ .acoes-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1.5rem; } .acoes-nota { font-size: var(--fs-xs); color: var(--cinza); } /* Desfazer o parecer: a saída do engano, no fim da tela de quem administra. Separada por uma linha e com a nota ao lado do botão, e não abaixo: quem chega aqui precisa ler que o e-mail já foi antes de clicar, e nota embaixo do botão se lê depois. Em telas estreitas a nota cai para a linha seguinte, que é o único lugar onde ela cabe. */ .admin-desfazer { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--borda); } .admin-desfazer .acoes-nota { flex: 1 1 22rem; } /* Devolver ao autor: fora do parecer, separada dele por uma linha, porque não é um resultado e não pode ser lida como um. */ .admin-devolver { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--borda); } /* As linhas de integrante do Show de Talentos: nome e e-mail lado a lado. Empilhados, três integrantes viravam seis campos numa coluna e a relação entre o nome e o e-mail de cada um se perdia. No estreito voltam a empilhar, que é onde a coluna única é a única saída. */ /* Quem sobe ao palco só se pergunta no coletivo. `:has()` sobre o rádio marcado, e não JavaScript: a resposta não muda nada no servidor — que ignora integrantes num número individual —, então esconder é assunto de tela. Num navegador sem `:has()` o bloco aparece, que é a degradação certa: campo a mais é melhor que campo que não existe. */ .form-bloco:has(input[name="is_group"][value="0"]:checked) .talento-quem { display: none; } .form-bloco:has(input[name="quem_inscreve_fora_do_palco"]:checked) .talento-quem { display: block; } /* «Qual?» só com «Outra» escolhida. A regra esconde, em vez de mostrar, e é de propósito: assim um navegador sem `:has()` deixa o campo à vista, que é melhor do que escondê-lo para sempre. `option:checked` responde qual está selecionada sem JavaScript. */ .form-bloco:has(select[name="artistic_area"] option:not([value="outra"]):checked) .talento-outra { display: none; } /* O palco de cada campus: aparece o do campus escolhido. O `:has()` mora no formulário, e não no bloco: o rádio do campus está numa seção e o palco em outra, e dentro do bloco o seletor não o alcançaria. Ele marca, e não esconde. Até 21/09/2026 o palco do campus não escolhido sumia, e com isso sumia a comparação: mesa de som e estantes de partitura existem em Uberaba e não em Iturama, e é isso que decide o campus de quem ainda está escolhendo. Sem `:has()` ficam os dois sem marca, e os dois continuam à vista. */ .talento-palcos { display: grid; gap: 0.5rem; margin: 0.5rem 0 1rem; } @media (min-width: 640px) { .talento-palcos { grid-template-columns: 1fr 1fr; } } .talento-palco-bloco { border: 1px solid var(--borda); background: var(--papel); padding: 0.65rem 0.8rem; } .talento-palco-t { font-size: var(--fs-sm); font-weight: 700; margin: 0 0 0.2rem; } /* Dentro do cartão a lista não carrega o respiro que ela tem solta na página: ali embaixo dela vem a borda, e não o próximo assunto. */ .talento-palco-bloco .talento-palco { margin: 0.2rem 0 0; } .form-resumo:has(input[name="campus"][value="uberaba"]:checked) [data-palco="uberaba"], .form-resumo:has(input[name="campus"][value="iturama"]:checked) [data-palco="iturama"] { border-color: var(--indigo-700); background: var(--indigo-luz, var(--superficie)); } /* A relação do que há no palco. Lista, e não frase: quem lê está conferindo se o que precisa está lá, e conferir numa frase corrida exige reler. */ /* O que a pessoa já inscreveu no Show de Talentos, antes do formulário. São vários desde 21/09/2026 — um por linguagem —, e cada um traz o que fazer com ele ao lado, porque corrigir deixou de ser reescrever a única. */ .talento-inscritos { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; } .talento-inscrita { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: baseline; justify-content: space-between; } /* A que está aberta no formulário abaixo fica marcada: sem isso, duas inscrições parecidas viram uma dúvida sobre qual se está corrigindo. */ .talento-inscrita--aberta { font-weight: 600; } .talento-acoes { display: inline-flex; gap: 0.9rem; align-items: baseline; flex: none; } .talento-agora { font-size: var(--fs-xs); color: var(--cinza); } /* Os dois números que decidem o campus: quantas vagas e quantos minutos. Na linha corrida, em cinza miúdo, eles se perdiam entre a contagem de inscrições e a duração do evento. */ .talento-vagas { display: block; margin-top: 0.2rem; font-size: var(--fs-sm); font-weight: 700; color: var(--indigo-700); } .talento-palco { margin: 0.3rem 0 0.9rem; padding-left: 1.2rem; font-size: var(--fs-sm); color: var(--cinza); } .talento-palco li { margin-bottom: 0.15rem; } /* O Circuito Ciência Delas: uma pessoa por bloco, e o curso só aparece para discente da UFTM (sem `:has()`, aparece sempre). */ .circuito-pessoa { min-width: 0; display: grid; gap: 0.5rem 0.8rem; margin: 0.6rem 0 0; } @media (min-width: 640px) { .circuito-pessoa { grid-template-columns: 1fr 1fr; } } .circuito-pessoa--integrante { min-width: 0; border: 1px solid var(--borda); padding: 0.6rem 0.9rem 0.9rem; margin-top: 0.8rem; } .circuito-pessoa--integrante legend { font-size: var(--fs-sm); font-weight: 800; padding: 0 0.3rem; } .circuito-pessoa label { margin-top: 0; } .circuito-pessoa:has(select option[value="externa"]:checked) .circuito-curso { display: none; } .circuito-cancelar { margin-top: 1.5rem; } /* O painel do circuito: confirmadas e lista de espera. */ .circuito-adm-espera { color: var(--alerta); } .talento-integrantes { display: grid; gap: 0.5rem; margin-top: 0.3rem; } .talento-tirar { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--magenta-700); white-space: nowrap; cursor: pointer; } .talento-integrante:has([data-tirar]:checked) input:not([data-tirar]) { opacity: 0.45; text-decoration: line-through; } .talento-integrante { display: grid; gap: 0.5rem; } @media (min-width: 640px) { .talento-integrante { grid-template-columns: 1fr 1fr; } .talento-integrante:has(.talento-tirar) { grid-template-columns: 1fr 1fr auto; } } /* As inscrições, no painel: uma por linha, abrindo a ficha. */ .talento-admin { margin-top: 0.5rem; } .talento-admin-n { min-width: 2.2rem; font-weight: 700; color: var(--cinza); } .talento-admin-ficha { display: grid; gap: 0.35rem 1.2rem; margin: 0; padding: 0.8rem 0.95rem; font-size: var(--fs-sm); } .talento-admin-ficha dt { font-weight: 700; } .talento-admin-ficha dd { margin: 0 0 0.4rem; min-width: 0; overflow-wrap: anywhere; } .talento-admin-texto { white-space: pre-line; } .talento-admin-lista { margin: 0; padding-left: 1.1rem; } @media (min-width: 640px) { .talento-admin-ficha { grid-template-columns: 9rem 1fr; } .talento-admin-ficha dd { margin-bottom: 0; } } /* As fichas de ouvinte, no painel: a conta de cada categoria no alto. */ .ouvinte-admin-contas { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.8rem 0 0; padding: 0; font-size: var(--fs-sm); } .ouvinte-admin-contas .num { margin-left: 0.3rem; font-weight: 700; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- lista e leitura de submissões ---------- */ .lista-submissoes { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 0.5rem; } /* Empilhado, e não em colunas. O título vem do UFTMnet em caixa alta e passa dos cem caracteres; numa coluna ao lado de outras três ele virava seis linhas num filete estreito, e a lista não cabia em tela pequena nenhuma. Sem colunas, não há o que quebrar: a mesma pilha serve o telefone e a coluna inteira. */ .lista-submissoes li { border: 1px solid var(--borda); background: var(--papel); border-left-width: 4px; border-left-color: var(--cinza-fraco); padding: 0.85rem 1rem; display: grid; gap: 0.5rem; justify-items: start; } /* A lista mistura duas coisas, e a cor da borda é o que separa uma da outra a dois metros de distância — antes do texto, antes do selo. */ .sub--resumo { border-left-color: var(--indigo-700); } .sub--atividade { border-left-color: var(--magenta-700); } /* A sobrancelha diz o que é; o selo, logo abaixo, diz de que trata. */ .sub-tipo { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; color: var(--cinza); margin: 0; } .sub--resumo .sub-tipo { color: var(--indigo-700); } .sub--atividade .sub-tipo { color: var(--magenta-700); } .sub-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem; align-items: center; margin: 0; } /* Corpo de identificação, não de manchete: é a mesma razão do título na tela de edição, e a caixa alta fica porque é a do edital. */ /* `pretty`, como no cabeçalho: título de trabalho tem quarenta palavras e vem em caixa alta do edital. `balance` deixaria a primeira linha pela metade. Os títulos curtos da tela seguem com `balance`, que é para eles. */ .sub-titulo { font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; letter-spacing: 0; color: var(--tinta); text-decoration: none; text-wrap: pretty; margin: 0; } .sub-titulo:hover { color: var(--indigo-700); text-decoration: underline; } /* Autoria e procedência: dois filetes de texto miúdo entre o título e os selos. O ponto entre as partes é desenhado pelo CSS, e não escrito na view — assim cada parte pode faltar sem deixar separador solto. */ .sub-ficha { display: grid; gap: 0.15rem; justify-items: start; } .sub-pessoas, .sub-origem { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.45; margin: 0; } .sub-pessoas span + span::before, .sub-origem span + span::before { content: "·"; margin-right: 0.35rem; color: var(--cinza-fraco); } .sub-ods { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; } .sub-ods img { width: 2.1rem; height: 2.1rem; } .sub-acoes { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin: 0; } .sub-acoes form { display: contents; } .sub-acoes .ligacao { display: inline-flex; align-items: center; gap: 0.35rem; } /* O ícone acompanha o texto: some junto se o rótulo mudar de cor, e não precisa de tamanho próprio. */ .icone { flex: none; } /* O aviso do rascunho. Discreto porque a lista pode ter vários, e âmbar porque é a cor que a casa usa para «isto custa caro se você ignorar». */ .sub-alerta { font-size: var(--fs-sm); line-height: 1.5; color: var(--tinta); border-left: 3px solid var(--alerta); padding: 0.15rem 0 0.15rem 0.7rem; margin: 0; } /* O começo do parecer, no cartão: em linha própria e na cor secundária, para não competir com a frase que o apresenta. */ .parecer-trecho { display: block; color: var(--cinza); margin-top: 0.2rem; } /* O parecer que pede correção, no alto da tela do resumo e do formulário. * * Âmbar, e não o verde da faixa de histórico: «aprovado com ajustes» é tarefa * com prazo. Letra de leitura, e não `--fs-sm`, porque é o texto que o autor * relê a cada campo que mexe. `pre-line` porque o parecer se escreve num * `textarea`, e sem ele os parágrafos chegavam emendados. */ .parecer { background: var(--papel); border: 1px solid var(--borda); border-left: 4px solid var(--alerta); padding: 1rem 1.2rem 1.1rem; margin: 0 0 1.75rem; } .parecer-rotulo { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--alerta); margin: 0; } .parecer-t { font-size: 1.05rem; font-weight: 800; line-height: 1.3; margin: 0.25rem 0 0; } .parecer-texto { white-space: pre-line; line-height: 1.55; margin: 0.8rem 0 0; padding: 0; border: 0; } .parecer-texto--vazio { color: var(--cinza); font-style: italic; } .parecer-regras { font-size: var(--fs-sm); color: var(--cinza); margin: 0.9rem 0 0; padding-left: 1.1rem; } .parecer-regras li + li { margin-top: 0.2rem; } .parecer-acao { margin: 1rem 0 0; } /* No formulário, recolhível: fica à vista em todos os passos, e quem já leu fecha sem perder o lugar. */ .parecer--formulario { margin-bottom: 1.25rem; } .parecer--formulario > summary { cursor: pointer; margin: 0; } /* No Início: o `border` inteiro do `.aviso--conta` vem depois e devolvia a borda da esquerda ao cinza — sem isto o alerta perdia a cor. */ .aviso--conta.aviso--alerta { border-left-color: var(--alerta); } .aviso--conta + .aviso--conta { margin-top: 0.6rem; } .aviso--conta p + p { margin-top: 0.35rem; } .sub-area { font-size: var(--fs-xs); color: var(--cinza); } /* Cheio, enquanto o estado fica de contorno: a área é identidade do trabalho e não muda, o estado muda com o tempo. O índigo é a cor de ação da casa, e aqui carrega a única informação que o autor usa para separar um resumo do outro antes de ler o título. */ .sub-selo { display: inline-flex; flex-wrap: wrap; align-items: stretch; } .sub-selo-area { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; padding: 0.25rem 0.5rem; white-space: nowrap; background: var(--indigo-700); color: #fff; } /* Colado ao da área e de contorno: os dois são um selo só, e o peso fica com a área — o tipo qualifica, não compete. Só a pesquisa se divide, então nas outras áreas o selo continua sendo uma peça. */ .sub-selo-tipo { display: inline-flex; align-items: center; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; padding: 0.25rem 0.5rem; white-space: nowrap; border: 1px solid var(--indigo-700); color: var(--indigo-700); } .sub-estado { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; padding: 0.2rem 0.45rem; border: 1px solid currentColor; } .sub-estado--draft { color: var(--cinza); } .sub-estado--submitted, .sub-estado--resubmitted { color: var(--indigo-700); } .sub-estado--changes_requested { color: var(--alerta); } .sub-estado--approved { color: var(--ok); } .sub-estado--rejected { color: var(--magenta-700); } .sub-estado--teste { color: var(--cinza); border-style: dashed; } /* ---------- a lista de escolha da busca ---------- */ /* * O resultado de uma busca não é um campo: é um punhado de coisas para * reconhecer. Cada linha é um alvo inteiro de clique, e não um rótulo com um * radio minúsculo no canto — aqui não se está preenchendo, se está achando. */ .escolha { list-style: none; margin: 0.5rem 0 0; padding: 0; border: 1px solid var(--borda); background: var(--papel); } .escolha li + li { border-top: 1px solid var(--borda); } .escolha button { display: grid; grid-template-columns: 1fr auto; gap: 0 0.75rem; width: 100%; text-align: left; padding: 0.6rem 0.8rem; background: none; border: 0; cursor: pointer; font: inherit; color: var(--tinta); } .escolha button:hover, .escolha button:focus-visible { background: var(--superficie); } .escolha button strong { font-size: var(--fs-sm); font-weight: 700; } .escolha button small { grid-column: 1; font-size: var(--fs-xs); color: var(--cinza); font-weight: 400; } /* À direita e alinhada ao nome: é o que diz quanto vem depois do clique. */ .escolha-conta { grid-column: 2; grid-row: 1; font-size: var(--fs-xs); color: var(--indigo-700); white-space: nowrap; } .escolha-vazio { padding: 0.7rem 0.8rem; font-size: var(--fs-sm); color: var(--cinza); } /* ---------- a prévia da publicação ---------- */ /* * Cinco campos na tela viram um parágrafo só nos Anais. A prévia é onde o * autor vê a emenda — e é na emenda que aparecem a frase que não fecha e o * rótulo repetido dentro do campo. * * O texto é corrido de propósito: quebrar por marcador daria a ele a cara do * formulário, que é justamente o que ele não vai ter quando for publicado. */ .publicado { border: 1px solid var(--borda); background: var(--papel); padding: 0.9rem 1.1rem 1.05rem; margin: 1rem 0 1.75rem; } /* Fechada por padrão: 450 palavras abertas custam a mesma altura em qualquer tela, e a prévia é o que se lê depois de escrever. */ .previa { border: 1px solid var(--borda); background: var(--papel); margin: 1.5rem 0 0; } /* `display: flex` no summary apaga o triângulo que o navegador desenharia, e a linha ficava sem dizer que abre. A seta volta como pseudo-elemento, à direita, e troca de sentido no aberto. */ .previa > summary { cursor: pointer; padding: 0.7rem 0.95rem; list-style: none; display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; align-items: baseline; } .previa > summary::-webkit-details-marker { display: none; } /* Desenhada com borda, e não com o glifo «▾»: a fonte entrega um triângulo minúsculo, e aqui o tamanho é escolha nossa. */ .previa > summary::after { content: ''; margin-left: auto; align-self: center; width: 0.6rem; height: 0.6rem; margin-right: 0.3rem; border-right: 2.5px solid var(--cinza); border-bottom: 2.5px solid var(--cinza); transform: translateY(-0.2rem) rotate(45deg); } .previa[open] > summary::after { transform: translateY(0.1rem) rotate(-135deg); } .previa > summary:hover { background: var(--superficie); } .previa > summary:hover::after { border-color: var(--tinta); } .previa[open] > summary { border-bottom: 1px solid var(--borda); } .previa-t { font-size: var(--fs-sm); font-weight: 800; } .previa-d { font-size: var(--fs-xs); color: var(--cinza); } .previa .publicado { border: 0; margin: 0; padding: 0.95rem 1.1rem 1.2rem; } .publicado-t { font-weight: 800; line-height: 1.35; margin: 0; text-wrap: pretty; } .publicado-a { font-size: var(--fs-sm); color: var(--cinza); margin: 0.35rem 0 0; } .publicado-c { line-height: 1.65; margin: 0.85rem 0 0; } /* Linha própria, abaixo do resumo, e com o mesmo respiro que separa o corpo do título: é onde a palavra-chave aparece no resumo acadêmico. */ .publicado-p { line-height: 1.65; margin: 0.85rem 0 0; } .publicado-c strong, .publicado-p strong { font-weight: 800; } /* O resumo lido por quem confere: uma parte por parágrafo, com o rótulo em cima. A quebra de linha do autor fica (`pre-line`), e a medida é a de leitura, e não a largura inteira do painel. */ .resumo-lido { border: 1px solid var(--borda); background: var(--papel); padding: 0.2rem 1.1rem 1.1rem; margin: 1rem 0 0; } .resumo-lido h3 { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--magenta-700); margin: 1.1rem 0 0.3rem; } .resumo-lido p { line-height: 1.65; margin: 0; max-width: 75ch; white-space: pre-line; } .resumo-lido + .previa { margin: 0.75rem 0 1.75rem; } /* autores vindos do projeto: leem-se, não se editam */ .autor--travado { background: var(--superficie); } .autor-fixo { display: flex; flex-wrap: wrap; gap: 0.15rem 0.8rem; align-items: baseline; } .autor-fixo strong { font-size: var(--fs-sm); } .autor-fixo span { font-size: var(--fs-xs); color: var(--cinza); } .autor-papeis { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; } .autor-selo--orientador { color: var(--indigo-700); font-weight: 700; } .autor-nota { font-size: var(--fs-xs); color: var(--cinza-fraco); font-style: italic; } /* o código do trabalho: é por ele que se distinguem dois resumos do mesmo projeto */ .sub-codigo { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em; color: var(--indigo-700); background: var(--indigo-luz, var(--superficie)); border: 1px solid var(--borda); padding: 0.2rem 0.45rem; white-space: nowrap; } .eyebrow .sub-codigo { margin-left: 0.5rem; } /* A saudação é a única linha da tela dirigida à pessoa, e em cinza ela se confundia com rótulo de seção. O magenta-700 é o acento em texto do 2026.css, 6,83:1 — o magenta-500 da navegação é bonito e tem 3,80:1, que não serve para 0,75rem. */ .hub-cabeca .eyebrow { color: var(--magenta-700); } /* * A caixa que identifica o trabalho. * * Código, título e situação respondem «que trabalho é este». A régua logo * abaixo responde «onde estou nele». Eram duas perguntas empilhadas sem nada * entre elas, e o título — que já é longo e em caixa alta — encostava nos * passos. A caixa separa as duas, e o respiro embaixo é maior que o de cima * porque quem lê vem descendo. */ .trabalho-cabeca { border: 1px solid var(--borda); background: var(--superficie); padding: 0.9rem 1.1rem 1rem; margin: 0.5rem 0 1.75rem; } .trabalho-cabeca .hub-t--trabalho { margin: 0.5rem 0 0; } .trabalho-cabeca .hub-d { font-size: var(--fs-sm); margin-top: 0.6rem; } /* O edital, logo abaixo do quadro do trabalho. * * Fora do quadro de propósito: dentro dele o nome inteiro do edital do UFTMnet * — que tem oitenta caracteres — competia com o título, que é o que se lê * primeiro. Aqui embaixo ele é o que é: a procedência, dita antes da autoria. * * O rótulo em caixa alta segura a linha quando o nome quebra, e o selo de * obrigatória fica no fim, onde já está nas outras telas. */ .trabalho-cabeca:has(+ .trabalho-edital) { margin-bottom: 0.6rem; } .trabalho-edital { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem; margin: 0 0 1.75rem; font-size: var(--fs-sm); } .trabalho-edital-r { font-size: var(--fs-xs); font-weight: 800; color: var(--cinza); text-transform: uppercase; letter-spacing: 0.08em; } /* O edital repetido junto do formulário do parecer vem logo depois do título da seção, e encostava nele: `.perfil-sub` tem respiro por cima e nenhum por baixo, então a linha do edital lia como subtítulo colado. E o espaço de baixo, que no alto da tela separa do resumo inteiro, aqui era grande demais para o que vem a seguir. */ .perfil-sub + .trabalho-edital { margin: 0.55rem 0 1.25rem; } /* prazo com ação: o card leva ao lugar onde a coisa acontece */ .prazo--acionavel { border-color: var(--indigo-700); } /* O Circuito Ciência Delas, com a cara da página dele no site */ .prazo--circuito { position: relative; overflow: hidden; isolation: isolate; color: #EFEDFA; border-color: #0E1038; background: radial-gradient(120% 90% at 85% 0%, rgba(229,53,156,.55), transparent 60%), radial-gradient(110% 90% at 0% 100%, rgba(46,53,168,.75), transparent 65%), #0E1038; } .prazo--circuito .prazo-estado { color: #FFB8E0; } .prazo--circuito .prazo-t, .prazo--circuito .prazo-t a { color: #fff; } .prazo--circuito .prazo-d, .prazo--circuito .prazo-quando { color: rgba(239,237,250,.85); } .prazo-fatos { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0 0; padding: 0; } .prazo-fatos li { padding: 0.2rem 0.6rem; font-size: var(--fs-xs); font-weight: 700; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); } .prazo--circuito .prazo-meu { color: #fff; background: rgba(255,255,255,.12); } .prazo--circuito .prazo-acao { display: flex; justify-content: center; min-height: 2.75rem; align-items: center; padding: 0.55rem 0.8rem; color: #0E1038; background: #fff; text-align: center; } .prazo--circuito .prazo-acao:hover, .prazo--circuito .prazo-acao:focus-visible { color: var(--magenta-700); } .prazo-site { display: flex; justify-content: center; align-items: center; gap: 0.35rem; min-height: 2.75rem; margin-top: 0.5rem; padding: 0.5rem 0.8rem; font-size: var(--fs-sm); font-weight: 700; text-align: center; color: #fff; border: 1px solid rgba(255,255,255,.45); text-decoration: none; } .prazo-site:hover, .prazo-site:focus-visible { background: rgba(255,255,255,.12); color: #fff; } .prazo-t a { color: inherit; text-decoration: none; } .prazo-t a:hover { color: var(--indigo-700); } /* O que já é meu neste marco: entre a data e a ação, porque se lê depois de «até quando» e antes de «o que faço agora». Cheio de propósito — é a única linha do cartão que fala da pessoa, e cinza ela se perdia na descrição. */ /* A equipe do Jiepinho: os monitores e a presença, no celular, no dia */ .jph-turno { margin-top: 0.6rem; scroll-margin-top: 1rem; border-bottom: 1px solid var(--borda); } .jph-cab { position: relative; padding: 0.7rem 2.2rem 0.7rem 0; cursor: pointer; list-style: none; } .jph-cab::-webkit-details-marker { display: none; } .jph-cab::after { content: ''; position: absolute; right: 0.5rem; top: 1.1rem; width: 0.6rem; height: 0.6rem; border-right: 2.5px solid var(--tinta); border-bottom: 2.5px solid var(--tinta); transform: rotate(45deg); } .jph-turno[open] > .jph-cab { border-bottom: 3px solid var(--tinta); } .jph-turno[open] > .jph-cab::after { top: 1.35rem; transform: rotate(-135deg); } .jph-cab h2 { margin: 0; font-size: 1.1rem; font-weight: 800; } .jph-cab p { margin: 0.1rem 0 0; font-size: var(--fs-sm); color: var(--cinza); } .jph-conta strong { color: var(--tinta); } .jph-oficina { flex: 1 1 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; font-size: var(--fs-sm); } .jph-oficina p { margin: 0; } .jph-oficina-sem { font-weight: 700; color: var(--magenta-700); } .jph-oficina form { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; } .jph-oficina label { font-weight: 700; } .jph-oficina select { flex: 1 1 14rem; min-width: 0; max-width: 100%; font: inherit; padding: 0.45rem 0.6rem; background: var(--papel); border: 1px solid var(--borda); } .jph-oficina select:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 1px; } .jph-oficina .jph-oficina-vazia { border: 2px solid var(--magenta-700); } .jph-oficina .jph-oficina-salvar { padding: 0.45rem 0.9rem; font-size: var(--fs-sm); } .jph-placar { margin: 1.2rem 0 1.4rem; } .jph-placar h2 { margin: 0 0 0.5rem; font-size: 1.1rem; font-weight: 800; } .jph-placar-rolagem { overflow-x: auto; } .jph-placar table { width: 100%; max-width: none; border-collapse: collapse; font-size: var(--fs-sm); } .jph-placar th, .jph-placar td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--borda); text-align: right; vertical-align: top; } .jph-placar th:first-child { text-align: left; font-weight: 700; min-width: 11rem; } .jph-placar th:last-child, .jph-placar td:last-child { text-align: left; min-width: 9rem; } .jph-placar thead th { font-size: var(--fs-xs); font-weight: 800; color: var(--cinza); } .jph-placar tfoot th, .jph-placar tfoot td { font-weight: 800; border-bottom: 0; } .jph-placar-falta { color: var(--magenta-700); font-weight: 800; } .jph-placar-ok { color: #1D6B3F; font-weight: 800; } .jph-oficinas-sem { margin: 0.8rem 0 0; padding: 0.7rem 0.9rem; border-left: 4px solid var(--magenta-700); background: var(--superficie); font-size: var(--fs-sm); } .jph-oficinas-sem h3 { margin: 0 0 0.3rem; font-size: var(--fs-sm); font-weight: 800; } .jph-oficinas-sem li { margin-bottom: 0.5rem; } .jph-por { margin-top: 0.3rem; } .jph-por select { width: 100%; max-width: 40rem; font: inherit; padding: 0.45rem 0.6rem; background: var(--papel); border: 2px solid var(--magenta-700); } .jph-por select:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 1px; } .jph-salvando { opacity: 0.55; pointer-events: none; } .jph-oficinas-sem ul { margin: 0; padding-left: 1.1rem; } .jph-lista { list-style: none; margin: 0; padding: 0; } .jph-quem .jph-zap { justify-self: start; margin-top: 0.25rem; color: #fff; } .jph-quem .jph-zap-nota { font-size: var(--fs-xs); color: var(--cinza); } .jph-quem .jph-oficina-ok { font-weight: 700; color: #1D6B3F; } .jph-quem .jph-oficina-falta { font-weight: 700; color: var(--magenta-700); } .jph-quem .jph-funcao { justify-self: start; padding: 0.05rem 0.45rem; font-size: var(--fs-xs); font-weight: 800; color: #fff; background: var(--indigo-700); } .jph-pessoa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--borda); } .jph-quem { flex: 1 1 14rem; min-width: 0; display: grid; gap: 0.1rem; overflow-wrap: anywhere; } .jph-quem span { font-size: var(--fs-sm); color: var(--cinza); } .jph-acao { display: flex; align-items: stretch; gap: 0.6rem; } .jph-quem .jph-adicional { justify-self: start; padding: 0.1rem 0.45rem; font-size: var(--fs-xs); font-weight: 700; color: var(--indigo-700); background: var(--superficie); border: 1px solid var(--borda); } .jph-marca { margin: 0; font-size: var(--fs-sm); font-weight: 800; color: #1D6B3F; } @media (max-width: 560px) { .jph-baixar .jph-botao { display: flex; width: 100%; } } .jph-botao:disabled { color: var(--cinza); cursor: not-allowed; } .jph-botao--retirar { color: var(--magenta-700); border-color: var(--magenta-700); } .jph-pessoa--ok { box-shadow: inset 4px 0 0 #1D6B3F; padding-left: 0.8rem; } .jph-form { margin-top: 0.8rem; padding: 0.6rem 0.9rem; background: var(--superficie); border: 1px solid var(--borda); } .jph-form summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 800; color: var(--indigo-700); padding: 0.25rem 0; } .jph-form form { display: grid; gap: 0.9rem; max-width: 42rem; margin-top: 0.8rem; padding-bottom: 0.4rem; justify-items: start; } .jph-form label { display: grid; gap: 0.3rem; width: 100%; font-size: var(--fs-sm); font-weight: 700; } .jph-form small { font-weight: 400; color: var(--cinza); } .jph-form input, .jph-form select, .jph-form textarea { font: inherit; font-weight: 400; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0.6rem 0.75rem; border: 1px solid var(--borda); background-color: var(--papel); color: var(--tinta); } .jph-form select { padding-right: 2.2rem; } .jph-form textarea { line-height: 1.5; resize: vertical; } .jph-form input:focus-visible, .jph-form select:focus-visible, .jph-form textarea:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 1px; } .jph-form .campo-nota { margin: -0.2rem 0 0; } /* A escolha dos pôsteres pelo avaliador, e a distribuição pela comissão */ .esc-hub-acoes { display: grid; gap: 0.5rem; } .esc-hub-c { display: inline-flex; justify-content: center; align-items: center; min-height: 2.75rem; padding: 0.4rem 0.9rem; font-size: var(--fs-sm); font-weight: 700; text-align: center; color: #fff; border: 1px solid rgba(255,255,255,.5); text-decoration: none; } .esc-hub-c:hover, .esc-hub-c:focus-visible { color: #fff; background: rgba(255,255,255,.14); } .esc-guia { margin: 0.6rem 0 0; font-size: var(--fs-sm); font-weight: 700; } /* As explicações e o simulador da ficha */ .sim-passos { margin: 1rem 0 0; padding-left: 1.3rem; display: grid; gap: 0.6rem; line-height: 1.5; } .sim-t { margin: 2rem 0 0.5rem; font-size: 1.3rem; font-weight: 800; } .sim-exemplo { margin-top: 0.8rem; padding: 0.9rem 1rem; background: var(--superficie); border: 1px solid var(--borda); } .sim-exemplo h3 { margin: 0.15rem 0 0; font-size: 1.05rem; line-height: 1.35; font-weight: 700; } .sim-ficha { display: grid; gap: 1rem; margin-top: 1rem; max-width: 42rem; } .sim-criterio { min-width: 0; margin: 0; padding: 0 0 1rem; border: 0; border-bottom: 1px solid var(--borda); } .sim-criterio legend { display: flex; justify-content: space-between; gap: 0.6rem; width: 100%; padding: 0; font-size: 1.05rem; font-weight: 800; } .sim-criterio legend span { font-size: var(--fs-sm); font-weight: 600; color: var(--cinza); white-space: nowrap; } .sim-criterio p { margin: 0.15rem 0 0.6rem; font-size: var(--fs-sm); line-height: 1.45; color: var(--cinza); } .sim-notas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.35rem; } .sim-notas label { position: relative; margin: 0; cursor: pointer; } .sim-notas input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; } .sim-notas span { display: grid; place-items: center; min-height: 3rem; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--papel); border: 1px solid var(--borda); } .sim-notas input:checked + span { color: #fff; background: var(--indigo-700); border-color: var(--indigo-700); } .sim-notas input:focus-visible + span { outline: 2px solid var(--magenta-700); outline-offset: 1px; } @media (min-width: 620px) { .sim-notas { grid-template-columns: repeat(11, minmax(0, 1fr)); } } .sim-faixas { list-style: none; display: grid; gap: 0.15rem; margin: 0.6rem 0 0; padding: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--cinza); } .sim-faixas li { padding: 0.3rem 0.5rem; } .sim-faixas b { display: inline-block; min-width: 2.7rem; color: var(--tinta); font-variant-numeric: tabular-nums; } .sim-faixas li.ativa { color: var(--tinta); background: #E8E8F8; box-shadow: inset 3px 0 0 var(--indigo-700); } .sim-total { padding: 0.9rem 1rem; color: #fff; background: var(--indigo-700); } .sim-total p { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-weight: 700; } .sim-total b { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; } .sim-total small { display: block; min-height: 1.2em; color: rgba(255,255,255,.88); } .sim-acoes { display: grid; grid-template-columns: 2fr 1fr; gap: 0.5rem; } .sim-volta { margin-top: 1.4rem; } .sim-volta .esc-botao { display: inline-flex; } .esc-hub { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: 1.2rem; padding: 1.4rem 1.6rem; color: #fff; background: linear-gradient(120deg, var(--indigo-700), #171A4F); } .esc-hub > div { flex: 1 1 22rem; min-width: 0; } .esc-hub--programa { background: linear-gradient(120deg, var(--magenta-700), #5E1240); } .esc-hub h2 { margin: 0.15rem 0 0.35rem; font-size: 1.45rem; line-height: 1.2; font-weight: 800; color: #fff; } .esc-hub p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: rgba(255,255,255,.88); } .esc-hub .esc-hub-e { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.75); } .esc-hub-b { display: inline-flex; justify-content: center; align-items: center; min-height: 3rem; padding: 0.7rem 1.3rem; font-weight: 800; text-align: center; text-decoration: none; color: #171A4F; background: #fff; } .esc-hub-b:hover, .esc-hub-b:focus-visible { color: var(--magenta-700); } @media (max-width: 560px) { .esc-hub { padding: 1.1rem; } .esc-hub-b { width: 100%; } } .esc-meus { margin-top: 1rem; background: var(--superficie); border: 1px solid var(--borda); } .esc-meus > summary { display: flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0.5rem 0.9rem; cursor: pointer; font-weight: 800; } .esc-meus > summary b { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.3rem; font-size: var(--fs-sm); color: #fff; background: var(--indigo-700); } .esc-meus > .campo-nota { padding: 0 0.9rem 0.8rem; margin: 0; } .esc-meu { padding: 0.8rem 0.9rem; border-top: 1px solid var(--borda); } .esc-meu h3, .esc-item h3 { margin: 0.1rem 0 0; font-size: 1rem; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; } .esc-meta, .esc-quando, .esc-com { margin: 0.2rem 0 0; font-size: var(--fs-sm); color: var(--cinza); } .esc-quando { margin: 0; font-weight: 800; color: var(--indigo-700); } .esc-dias { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.4rem; margin-top: 1rem; } @media (min-width: 620px) { .esc-dias { grid-auto-columns: minmax(0, 11rem); } } .esc-dia { display: grid; justify-items: center; gap: 0.05rem; padding: 0.55rem 0.2rem; text-align: center; text-decoration: none; color: var(--tinta); background: var(--papel); border: 1px solid var(--borda); } .esc-dia b { font-size: 0.95rem; font-weight: 800; } .esc-dia span { font-size: var(--fs-sm); } .esc-dia small { font-size: 0.7rem; color: var(--cinza); } .esc-dia--atual, .esc-dia--atual:hover { color: #fff; background: var(--indigo-700); border-color: var(--indigo-700); } .esc-dia--atual small { color: rgba(255,255,255,.85); } .esc-areas { display: flex; gap: 0.4rem; margin: 0.7rem -1rem 0; padding: 0 1rem 0.3rem; overflow-x: auto; scrollbar-width: none; } .esc-area { flex: none; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.85rem; font-size: var(--fs-sm); font-weight: 700; text-decoration: none; white-space: nowrap; color: var(--tinta); background: var(--papel); border: 1px solid var(--borda); } .esc-area--atual, .esc-area--atual:hover { color: #fff; background: var(--tinta); border-color: var(--tinta); } .esc-busca { display: flex; gap: 0.4rem; margin: 0.5rem 0 0.9rem; } .esc-busca input[type="search"], .esc-acao--atribuir input { font: inherit; font-weight: 400; flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; min-height: 2.75rem; padding: 0.5rem 0.7rem; border: 1px solid var(--borda); background-color: var(--papel); color: var(--tinta); } .esc-sessao { border-top: 1px solid var(--borda); scroll-margin-top: 5rem; } .esc-sessao:last-of-type { border-bottom: 1px solid var(--borda); } .esc-sessao > summary { display: flex; justify-content: space-between; align-items: center; gap: 0.1rem 1rem; min-height: 3.25rem; padding: 0.5rem 0.3rem; cursor: pointer; } .esc-sessao[open] > summary { position: sticky; top: 0; z-index: 1; background: var(--superficie); } .esc-sessao > summary strong { font-size: 1.05rem; } .esc-sessao > summary span { font-size: var(--fs-sm); color: var(--cinza); } .esc-item { padding: 0.8rem 0.3rem 0.9rem; border-top: 1px solid var(--borda); } .esc-txt { flex: 1 1 20rem; min-width: 0; overflow-wrap: anywhere; } .esc-txt h3 { margin: 0; font-size: 0.98rem; line-height: 1.35; font-weight: 700; } .esc-cnpq { display: inline-block; margin-left: 0.3rem; padding: 0 0.4rem; font-size: var(--fs-xs); font-weight: 800; color: #fff; background: var(--indigo-700); } .esc-acao { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.5rem; margin-top: 0.6rem; max-width: 26rem; } .esc-acao form, .esc-acao .esc-botao { width: 100%; } .esc-botao { display: flex; align-items: center; min-height: 3rem; padding: 0.5rem 0.7rem; text-align: center; justify-content: center; } .esc-botao--sair { color: var(--magenta-700); border-color: var(--magenta-700); } .esc-toast { position: fixed; left: 50%; bottom: 1rem; z-index: 40; width: min(26rem, calc(100% - 2rem)); margin: 0; padding: 0.75rem 1rem; font-weight: 700; text-align: center; color: #fff; background: #1D6B3F; transform: translateX(-50%); animation: esc-toast 4s forwards; } @keyframes esc-toast { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } .esc-acao--atribuir { flex: 0 1 26rem; flex-wrap: wrap; align-items: center; } .esc-acao--atribuir form:first-child { display: flex; flex: 1 1 100%; gap: 0.5rem; } .esc-libera { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 1rem 0; } .esc-libera-sessao { padding: 0.7rem 0; border-top: 1px solid var(--borda); } .esc-ver { margin: 0.8rem 0; font-size: var(--fs-sm); } @media (max-width: 560px) { .esc-acao { max-width: none; } .esc-acao--atribuir { display: flex; } .esc-acao--atribuir form:first-child .esc-botao { width: auto; } } /* A cara das telas do avaliador: o topo com a régua dos ODS, e cartões */ .esc-topo { position: relative; margin: 0.4rem 0 1rem; padding: 1.3rem 1.2rem 1.5rem; color: #fff; overflow: hidden; background: linear-gradient(120deg, var(--indigo-700), #171A4F); } .esc-topo h1 { margin: 0.15rem 0 0.4rem; font-size: clamp(1.6rem, 6vw, 2.2rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; color: #fff; } .esc-topo p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: rgba(255,255,255,.9); max-width: 60ch; } .esc-topo .esc-topo-e { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.75); } .esc-topo-l, .esc-topo-l:visited { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: 0.8rem; padding: 0.3rem 0.9rem; font-size: var(--fs-sm); font-weight: 800; text-decoration: none; color: #12144A; background: #fff; } .esc-topo-l:hover, .esc-topo-l:focus-visible { color: var(--magenta-700); } .esc-regua { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #E5243B 0 5.5%, #DDA63A 0 11%, #4C9F38 0 16.5%, #C5192D 0 22%, #FF3A21 0 27.5%, #26BDE2 0 33%, #FCC30B 0 38.5%, #A21942 0 44%, #FD6925 0 49.5%, #DD1367 0 55%, #FD9D24 0 60.5%, #BF8B2E 0 66%, #3F7E44 0 71.5%, #0A97D9 0 77%, #56C02B 0 82.5%, #00689D 0 88%, #19486A 0 94%, #8A4F2A 0); } .esc-meus { background: var(--papel); box-shadow: inset 4px 0 0 var(--indigo-700); } .esc-dia { padding-block: 0.7rem; border-top: 4px solid var(--borda); } .esc-dia--atual, .esc-dia--atual:hover { border-top-color: var(--magenta-700); } .esc-area { border-radius: 999px; } .esc-turno { margin: 1.2rem 0 0.45rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--magenta-700); } .esc-sessao, .esc-sessao:last-of-type { margin-bottom: 0.45rem; background: var(--papel); border: 1px solid var(--borda); } .esc-sessao > summary { position: relative; padding: 0.55rem 2.3rem 0.55rem 0.9rem; list-style: none; } .esc-sessao > summary::-webkit-details-marker { display: none; } .esc-sessao > summary::after { content: ''; position: absolute; right: 0.95rem; top: 50%; width: 0.55rem; height: 0.55rem; margin-top: -0.4rem; border-right: 2.5px solid var(--indigo-700); border-bottom: 2.5px solid var(--indigo-700); transform: rotate(45deg); } .esc-sessao[open] { border-color: var(--indigo-700); } .esc-sessao[open] > summary::after { margin-top: -0.1rem; transform: rotate(-135deg); } .esc-conta { padding: 0.1rem 0.55rem; font-weight: 700; background: var(--superficie); border-radius: 999px; } .esc-item { margin: 0; padding: 0.9rem; border-top: 1px solid var(--borda); } .esc-etiquetas { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.4rem; } .esc-etq { padding: 0.08rem 0.5rem; font-size: var(--fs-xs); font-weight: 800; color: var(--indigo-700); background: #E8E8F8; } .esc-etq--leve { font-weight: 600; color: var(--cinza); background: var(--superficie); } .esc-etq--cnpq { color: #fff; background: var(--magenta-700); } .esc-item--pesquisa .esc-etq:first-child { color: #7A0F4D; background: #FBE3F1; } .esc-item--extensao .esc-etq:first-child { color: #1D6B3F; background: #E6F2EA; } .esc-item--ensino .esc-etq:first-child { color: #8A5200; background: #FFF1D6; } /* O treino da ficha: cada critério um cartão, e a nota sempre à vista */ .sim-passos { list-style: none; counter-reset: passo; padding: 0; gap: 0.7rem; } .sim-passos li { counter-increment: passo; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.7rem; } .sim-passos li::before { content: counter(passo); display: grid; place-items: center; width: 2rem; height: 2rem; font-weight: 800; color: #fff; background: var(--indigo-700); border-radius: 50%; } .sim-t { scroll-margin-top: 5rem; } .sim-exemplo { color: #fff; background: #12144A; border: 0; } .sim-exemplo h3 { color: #fff; } .sim-exemplo p { margin: 0.2rem 0 0; font-size: var(--fs-sm); color: rgba(255,255,255,.85); } .sim-exemplo .sim-selo { display: inline-block; margin: 0 0 0.45rem; padding: 0.08rem 0.5rem; font-size: var(--fs-xs); font-weight: 800; color: #12144A; background: #FFD84D; } .sim-ficha { gap: 0.7rem; } .sim-criterio { padding: 0.9rem; background: var(--papel); border: 1px solid var(--borda); } .sim-criterio legend { display: contents; } .sim-criterio legend b { display: block; font-size: 1.02rem; padding-right: 3.2rem; } .sim-criterio { position: relative; } .sim-criterio legend span { position: absolute; top: 0.85rem; right: 0.9rem; padding: 0.05rem 0.45rem; font-size: var(--fs-xs); font-weight: 800; color: var(--indigo-700); background: #E8E8F8; } .sim-criterio .sim-ajuda { margin: 0.2rem 0 0.65rem; } .sim-notas { display: flex; flex-wrap: wrap; gap: 0.3rem; } .sim-notas label { flex: 1 1 calc(16.66% - 0.3rem); min-width: 2.6rem; } .sim-notas span { min-height: 2.9rem; border-top-width: 3px; } .sim-nota--a span { border-top-color: #1D6B3F; } .sim-nota--b span { border-top-color: var(--indigo-700); } .sim-nota--c span { border-top-color: #C77700; } .sim-nota--d span { border-top-color: #B3261E; } .sim-nota--a input:checked + span { background: #1D6B3F; border-color: #1D6B3F; } .sim-nota--b input:checked + span { background: var(--indigo-700); border-color: var(--indigo-700); } .sim-nota--c input:checked + span { background: #A86400; border-color: #A86400; } .sim-nota--d input:checked + span { background: #B3261E; border-color: #B3261E; } .sim-agora { margin: 0.6rem 0 0; padding: 0.5rem 0.7rem; font-size: var(--fs-sm); line-height: 1.4; font-weight: 600; color: var(--tinta); background: #E8E8F8; } .sim-agora[data-faixa="9–10"] { background: #E6F2EA; } .sim-agora[data-faixa="4–6"] { background: #FFF1D6; } .sim-agora[data-faixa="0–3"] { background: #FBE4DD; } .sim-guia { margin-top: 0.5rem; font-size: var(--fs-sm); } .sim-guia summary { display: flex; align-items: center; min-height: 2.4rem; font-weight: 700; color: var(--indigo-700); cursor: pointer; } .sim-total { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 4.6rem 0.6rem 1rem; color: #fff; background: #12144A; box-shadow: 0 -4px 14px rgb(18 18 43 / .22); order: 99; } .sim-total p { display: grid; gap: 0; margin: 0; font-weight: 800; } .sim-total small { min-height: 0; font-weight: 500; } .sim-total b { font-size: 1.9rem; line-height: 1; } @media (min-width: 620px) { .sim-notas label { flex-basis: 0; min-width: 0; } .sim-notas { flex-wrap: nowrap; } .sim-total { padding-right: 1rem; } .esc-topo { padding: 1.6rem 1.6rem 1.8rem; } } /* O treino da ficha, refinado: botões iguais, faixas alinhadas e sem frase repetida */ .sim-notas { justify-content: center; gap: 0.35rem; } .sim-notas label { flex: 0 0 calc((100% - 1.75rem) / 6); min-width: 0; } .sim-notas span { min-height: 3rem; border-width: 1px; font-size: 1.05rem; } .sim-nota--a span { background: #EEF7F1; border-color: #BFDDCB; } .sim-nota--b span { background: #EEEEFA; border-color: #C9CAEC; } .sim-nota--c span { background: #FFF7E6; border-color: #EBD6A8; } .sim-nota--d span { background: #FCF0ED; border-color: #EFCFC8; } .sim-notas label:hover span { filter: brightness(.96); } .sim-notas input:checked + span { font-weight: 800; } .sim-criterio .sim-agora { margin: 0.6rem 0 0; padding: 0.55rem 0.7rem; font-size: var(--fs-sm); line-height: 1.4; font-weight: 600; color: var(--tinta); background: #EEEEFA; box-shadow: inset 4px 0 0 var(--indigo-700); } .sim-criterio .sim-agora[data-faixa="9–10"] { background: #EEF7F1; box-shadow: inset 4px 0 0 #1D6B3F; } .sim-criterio .sim-agora[data-faixa="4–6"] { background: #FFF7E6; box-shadow: inset 4px 0 0 #A86400; } .sim-criterio .sim-agora[data-faixa="0–3"] { background: #FCF0ED; box-shadow: inset 4px 0 0 #B3261E; } .sim-agora:has(+ .sim-guia[open]) { display: none; } .sim-guia summary { position: relative; justify-content: space-between; padding-right: 1.4rem; list-style: none; } .sim-guia summary::-webkit-details-marker { display: none; } .sim-guia summary::after { content: ''; position: absolute; right: 0.3rem; top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.35rem; border-right: 2px solid var(--indigo-700); border-bottom: 2px solid var(--indigo-700); transform: rotate(45deg); } .sim-guia[open] summary::after { margin-top: -0.1rem; transform: rotate(-135deg); } .sim-faixas { gap: 0.3rem; margin-top: 0.2rem; } .sim-faixas li { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: 0.6rem; align-items: start; padding: 0.45rem 0.5rem; } .sim-faixas b { min-width: 0; padding: 0.05rem 0; text-align: center; font-size: var(--fs-xs); font-weight: 800; } .sim-faixas li[data-faixa="9–10"] b { color: #1D6B3F; background: #EEF7F1; } .sim-faixas li[data-faixa="7–8"] b { color: var(--indigo-700); background: #EEEEFA; } .sim-faixas li[data-faixa="4–6"] b { color: #8A5200; background: #FFF7E6; } .sim-faixas li[data-faixa="0–3"] b { color: #B3261E; background: #FCF0ED; } .sim-faixas li.ativa { color: var(--tinta); font-weight: 600; background: var(--superficie); box-shadow: none; } @media (min-width: 620px) { .sim-notas label { flex: 1 1 0; } } /* A ficha sem cor por faixa (03/11/2026): branco, e só a nota escolhida em azul; a descrição é texto simples */ .sim-notas .sim-nota--a span, .sim-notas .sim-nota--b span, .sim-notas .sim-nota--c span, .sim-notas .sim-nota--d span { background: var(--papel); border-color: var(--borda); } .sim-notas .sim-nota--a input:checked + span, .sim-notas .sim-nota--b input:checked + span, .sim-notas .sim-nota--c input:checked + span, .sim-notas .sim-nota--d input:checked + span { color: #fff; background: var(--indigo-700); border-color: var(--indigo-700); } .sim-criterio .sim-agora, .sim-criterio .sim-agora[data-faixa] { margin: 0.55rem 0 0; padding: 0; font-weight: 400; color: var(--tinta); background: none; box-shadow: none; } .sim-faixas li[data-faixa] b { color: var(--tinta); background: none; text-align: left; font-size: var(--fs-sm); } .sim-faixas li.ativa { font-weight: 400; background: none; } .sim-faixas li.ativa b { color: var(--indigo-700); } .esc-topo-t { font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important; line-height: 1.25 !important; letter-spacing: -0.01em !important; } .sim-indica { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.9rem; background: var(--papel); border: 1px solid var(--borda); cursor: pointer; } .sim-indica input { flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; } .sim-indica small { display: block; margin-top: 0.1rem; line-height: 1.4; color: var(--cinza); } .sim-acoes--um { grid-template-columns: 1fr; } .esc-ficha-ok, .esc-ficha-meio { margin: 0.4rem 0 0; font-size: var(--fs-sm); font-weight: 800; color: #1D6B3F; } .esc-ficha-meio { color: #8A5200; } .sim-ficha { max-width: none; } /* o botão de ajuda fica no canto: a nota não pode ficar embaixo dele */ @media (min-width: 620px) { .sim-total { padding-right: 13.5rem; } } .esc-como { display: grid; gap: 0.6rem; margin: 0 0 1rem; padding: 0.8rem 0.9rem; background: #FFF8DC; border: 1px solid #E8D48A; } .esc-como p { margin: 0; font-size: var(--fs-sm); line-height: 1.45; } .esc-como nav { display: flex; flex-wrap: wrap; gap: 0.35rem; } .esc-botao:disabled { opacity: .55; cursor: not-allowed; } .prog-outros { margin: 0.9rem 0 0; padding: 0.7rem 0.9rem 0.8rem; border: 1px solid var(--borda); } .prog-outros legend { padding: 0 0.3rem; font-size: var(--fs-sm); font-weight: 700; } .prog-outro { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; margin-bottom: 0.5rem; } .prog-outro[hidden] { display: none; } .prog-outro label { margin: 0; flex: 1 1 8rem; min-width: 0; } .prog-outro input { width: 100%; box-sizing: border-box; } .esc-resultado { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.2rem 1rem; margin: 0.9rem 0 0.2rem; padding: 0.6rem 0.9rem; font-size: var(--fs-sm); background: #E8E8F8; } .esc-resultado p { margin: 0; } .esc-resultado a { font-weight: 700; } /* O título usa a largura toda (04/11/2026): o `balance` herdado do site quebrava a linha antes da hora e deixava vazio à direita. O `pretty` só evita palavra sozinha. */ h1, h2, h3, h4, h5, h6 { text-wrap: pretty; } .esc-resumo { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 0.4rem; } .esc-sessao > summary .esc-ok { padding: 0.1rem 0.55rem; font-weight: 800; color: #fff; background: #1D6B3F; border-radius: 999px; } .esc-sessao .esc-meu { padding: 0.9rem; background: #EEF7F1; border-top: 1px solid var(--borda); } .esc-sessao > summary .esc-seu { padding: 0.1rem 0.55rem; font-weight: 800; color: #7A4A00; background: #FFF1D6; border-radius: 999px; } .esc-aviso-seu { margin: 0; padding: 0.7rem 0.9rem; font-size: var(--fs-sm); line-height: 1.45; color: var(--tinta); background: #FFF8E8; border-top: 1px solid var(--borda); } /* Os filtros da escolha, num painel só, com dias e busca na mesma largura */ .esc-filtros { margin-top: 1rem; padding: 0.9rem 1rem 1rem; background: var(--superficie); border: 1px solid var(--borda); } .esc-rotulo { margin: 0 0 0.35rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cinza); } .esc-filtros .esc-dias { margin: 0 0 0.8rem; grid-auto-columns: minmax(0, 1fr); gap: 0; } .esc-filtros .esc-dia { padding: 0.55rem 0.3rem; background: var(--papel); border: 1px solid var(--borda); border-left-width: 0; border-top-width: 1px; } .esc-filtros .esc-dia:first-child { border-left-width: 1px; } .esc-filtros .esc-dia b { font-size: 0.95rem; } .esc-filtros .esc-dia--atual, .esc-filtros .esc-dia--atual:hover { color: #fff; background: var(--indigo-700); border-color: var(--indigo-700); } .esc-filtros .esc-areas { margin: 0 0 0.8rem; padding: 0; flex-wrap: wrap; overflow: visible; } .esc-filtros .esc-area { min-height: 2.4rem; padding: 0 0.8rem; background: var(--papel); border-radius: 0; } .esc-filtros .esc-area--atual, .esc-filtros .esc-area--atual:hover { color: #fff; background: var(--indigo-700); border-color: var(--indigo-700); } .esc-filtros .esc-busca { margin: 0; gap: 0; } .esc-filtros .esc-busca input[type="search"] { border-right: 0; } .esc-busca-b { flex: none; min-height: 2.75rem; padding: 0 1rem; font: inherit; font-size: var(--fs-sm); font-weight: 800; color: #fff; background: var(--tinta); border: 1px solid var(--tinta); cursor: pointer; } .esc-busca-b:hover, .esc-busca-b:focus-visible { background: var(--indigo-700); border-color: var(--indigo-700); } /* Botões da mesma altura, e o horário sempre numa linha só */ .esc-acao { align-items: stretch; } .esc-acao > form { display: flex; } .esc-acao .esc-botao { height: 100%; line-height: 1.2; } .esc-sessao > summary strong { flex: none; white-space: nowrap; } .esc-sessao > summary .esc-conta, .esc-sessao > summary .esc-ok, .esc-sessao > summary .esc-seu { white-space: nowrap; } .esc-sessao > summary .esc-resumo { flex: 1 1 auto; min-width: 0; } @media (max-width: 560px) { .esc-acao .esc-botao { padding-inline: 0.35rem; font-size: 0.9rem; } .esc-sessao > summary { padding-left: 0.75rem; padding-right: 2.1rem; gap: 0.25rem 0.4rem; } .esc-sessao > summary strong { font-size: 1rem; } .esc-sessao > summary .esc-conta, .esc-sessao > summary .esc-ok, .esc-sessao > summary .esc-seu { padding-inline: 0.45rem; font-size: 0.75rem; } } .esc-codigo { align-self: center; margin-left: 0.15rem; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--cinza); } /* No iPhone, data, hora e lista saem azuis se a cor não for dita */ input[type="date"], input[type="time"], input[type="datetime-local"], select { color: var(--tinta); -webkit-text-fill-color: var(--tinta); } .esc-selos { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.45rem 0 0; } .esc-selos img { display: block; width: 2.25rem; height: 2.25rem; } /* Nas telas do avaliador, o botão principal é azul com texto branco */ .esc .btn-p, .esc .btn-p:visited { color: #fff; background: var(--indigo-700); border-color: var(--indigo-700); } .esc .btn-p:hover, .esc .btn-p:focus-visible { color: #fff; background: #12144A; border-color: #12144A; } /* As áreas em linhas, com botões iguais que ocupam a largura toda */ .esc-filtros .esc-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.3rem, 1fr)); gap: 0.35rem; } .esc-filtros .esc-area { justify-content: center; min-height: 2.6rem; padding-inline: 0.3rem; white-space: nowrap; } /* O trabalho na lista do avaliador, como na programação do site */ .esc-topo-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0; } .esc-num { padding: 0.1rem 0.5rem; font-size: var(--fs-sm); font-weight: 800; color: #fff; background: var(--indigo-700); font-variant-numeric: tabular-nums; white-space: nowrap; } .esc-area-tag { padding: 0 0.4rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--indigo-700); border: 1px solid currentColor; } .esc-area-tag--extensao { color: #1D6B3F; } .esc-area-tag--ensino { color: #8A5200; } .esc-area-tag--monitoria_inclusiva, .esc-area-tag--cnpq { color: var(--magenta-700); } .esc-item h3, .esc-meu h3 { margin-top: 0.35rem; } /* Levar a lista para o calendário ou o WhatsApp, como a «Minha agenda» do site */ .esc-levar { padding: 0.8rem 0.9rem; border-top: 1px solid var(--borda); } .esc-levar-botoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } .esc-levar-botoes a { display: flex; justify-content: center; align-items: center; gap: 0.45rem; min-height: 2.9rem; padding: 0.45rem 0.6rem; font-size: var(--fs-sm); font-weight: 800; text-align: center; text-decoration: none; } .esc-levar-botoes a[target="_blank"]::after { content: none !important; display: none !important; } .esc-levar-botoes svg { flex: none; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .esc-levar-ics, .esc-levar-ics:visited, .esc-levar-ics:hover { color: #fff; background: #1D6B3F; } .esc-levar-google, .esc-levar-google:visited { color: #1D6B3F; background: var(--papel); border: 2px solid #1D6B3F; } .esc-levar-google:hover { color: #1D6B3F; background: #E6F2EA; } .esc-levar-zap, .esc-levar-zap:visited, .esc-levar-zap:hover { color: #fff; background: #1FA855; } .esc-levar-zap:hover { background: #178C46; } .esc-levar-nota { margin: 0.4rem 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--cinza); } .esc-levar-nota summary { padding: 0.3rem 0; font-weight: 700; color: var(--indigo-700); cursor: pointer; } .esc-levar-nota p { margin: 0.3rem 0 0; } @media (max-width: 560px) { .esc-levar-botoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .esc-levar-ics { grid-column: 1 / -1; } .esc-levar-botoes a { padding-inline: 0.3rem; white-space: nowrap; } } /* A conta por categoria cabe no celular: os títulos quebram em vez de cortar */ @media (max-width: 560px) { .admin .aval-categorias { table-layout: fixed; width: 100%; font-size: var(--fs-xs); } .admin .aval-categorias th, .admin .aval-categorias td { padding-inline: 0.2rem; white-space: normal; overflow-wrap: anywhere; hyphens: auto; } .admin .aval-categorias thead th { letter-spacing: 0; text-transform: none; } .admin .aval-categorias th:first-child { width: 36%; } } /* «Quem já escolheu»: por avaliador */ .esc-numero-link { display: grid; gap: 0.1rem; color: inherit; text-decoration: none; } .esc-numero-link span { text-decoration: underline; } .esc-numero-link:hover { color: var(--indigo-700); } .esc-quem-contato { margin: 0; padding: 0.5rem 0.9rem; font-size: var(--fs-sm); border-top: 1px solid var(--borda); } .esc-quem-item { padding: 0.8rem 0.9rem; border-top: 1px solid var(--borda); } .esc-quem-item .esc-quando { margin-top: 0.3rem; } .esc-quem-item h3 { margin: 0.35rem 0 0; font-size: 1rem; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; } .esc-passar-marca { display: inline-grid; place-items: center; min-width: 1.8rem; min-height: 1.8rem; margin: -0.2rem 0; cursor: pointer; } .esc-passar-marca input { width: 1.15rem; height: 1.15rem; accent-color: var(--indigo-700); } .esc-passar { display: grid; gap: 0.45rem; padding: 0.9rem; border-top: 1px solid var(--borda); background: #F3F2FB; } .esc-passar label { font-weight: 800; font-size: var(--fs-sm); } .esc-passar input[name="para"], .esc-passar-busca input[name="busca"] { font: inherit; font-weight: 400; box-sizing: border-box; width: 100%; max-width: 34rem; min-width: 0; min-height: 2.9rem; padding: 0.55rem 0.85rem; border: 1.5px solid #C9C5DD; border-radius: 10px; background-color: #fff; color: var(--tinta); } .esc-passar input[name="para"]::placeholder, .esc-passar-busca input[name="busca"]::placeholder { color: #8A85A3; } .esc-passar input[name="para"]:focus-visible, .esc-passar-busca input[name="busca"]:focus-visible { outline: 3px solid rgba(46, 53, 168, .25); outline-offset: 1px; border-color: var(--indigo-700); } .esc-passar-botoes { display: flex; flex-wrap: wrap; gap: 0.5rem; } .esc-passar .campo-nota, .esc-passar .campo-erro { margin: 0; } .esc-passar-busca { display: grid; gap: 0.35rem; margin: 1rem 0; } .esc-passar-busca label { font-weight: 800; font-size: var(--fs-sm); } .esc-passar-busca div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .esc-passar-busca input[name="busca"] { flex: 1 1 14rem; } .esc-faltam { list-style: none; margin: 0.6rem 0 0; padding: 0; border: 1px solid var(--borda); } .esc-faltam li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.7rem; padding: 0.6rem 0.9rem; font-size: var(--fs-sm); } .esc-faltam li + li { border-top: 1px solid var(--borda); } .esc-faltam span { color: var(--cinza); } .esc-faltam a { margin-left: auto; } @media (max-width: 560px) { .esc-numeros-3 li:last-child { grid-column: 1 / -1; } .esc-faltam li { display: grid; } .esc-faltam a { margin-left: 0; } } /* Como está o agendamento das avaliações, no alto da tela de avaliadores */ .esc-panorama { margin: 1.2rem 0; padding: 1.4rem 1.6rem; color: #fff; background: linear-gradient(120deg, var(--indigo-700), #171A4F); } .esc-panorama p { margin: 0; } .esc-panorama-e { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.75); } .esc-panorama h2 { margin: 0.15rem 0 0.7rem; font-size: 1.45rem; line-height: 1.2; font-weight: 800; color: #fff; } .esc-panorama-barra { display: block; height: 0.7rem; background: rgba(255,255,255,.2); } .esc-panorama-barra > span { display: block; height: 100%; min-width: 0; background: #fff; } .esc-panorama .esc-panorama-pct { margin-top: 0.4rem; font-size: var(--fs-sm); color: rgba(255,255,255,.88); } .esc-panorama-numeros { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 1rem 0 0; padding: 0; background: rgba(255,255,255,.25); } .esc-panorama-numeros li { display: grid; align-content: start; gap: 0.1rem; padding: 0.7rem 0.9rem; background: #1F2264; } .esc-panorama-numeros b { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; } .esc-panorama-numeros span { font-size: var(--fs-xs); line-height: 1.35; color: rgba(255,255,255,.85); } .esc-panorama-dias { list-style: none; display: grid; gap: 0.45rem; margin: 1rem 0 0; padding: 0; } .esc-panorama-dias li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) 5.6rem; align-items: center; gap: 0.7rem; font-size: var(--fs-sm); } .esc-panorama-dia { font-weight: 700; } .esc-panorama-conta { text-align: right; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.88); } .esc-panorama-barra--dia { height: 0.5rem; } .esc-panorama-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; } @media (max-width: 560px) { .esc-panorama { padding: 1.1rem; } .esc-panorama-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .esc-panorama-numeros li:last-child { grid-column: 1 / -1; } .esc-panorama-dias li { grid-template-columns: 4.9rem minmax(0, 1fr) 4.6rem; gap: 0.5rem; } .esc-panorama-acoes a { width: 100%; } } .horarios-novas { margin: 1.2rem 0; } .horarios-nova { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 0.7rem; margin-top: 0.6rem; padding: 0.8rem 0.9rem; background: var(--superficie); border: 1px solid var(--borda); } .horarios-nova p { margin: 0.2rem 0 0; } .horarios-nova label { display: grid; gap: 0.2rem; font-size: var(--fs-sm); font-weight: 700; } @media (max-width: 760px) { .horarios-nova { grid-template-columns: minmax(0, 1fr); } } /* A inscrição do público nas atividades formativas */ .ins-item { margin-top: 0.8rem; padding: 0.9rem; background: var(--papel); border: 1px solid var(--borda); } .ins-item h3 { margin: 0.25rem 0 0; font-size: 1.05rem; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; } .ins-local { margin: 0.25rem 0 0; font-size: var(--fs-sm); color: var(--cinza); overflow-wrap: anywhere; } .ins-vagas { margin: 0.5rem 0 0; font-size: var(--fs-sm); color: var(--cinza); } .ins-vagas strong { font-weight: 800; color: #1D6B3F; } .ins-vagas .ins-lotada { color: var(--magenta-700); } .ins-mais { margin-top: 0.5rem; font-size: var(--fs-sm); line-height: 1.5; } .ins-mais summary { padding: 0.3rem 0; font-weight: 700; color: var(--indigo-700); cursor: pointer; } .ins-mais p { margin: 0.4rem 0 0; overflow-wrap: anywhere; white-space: pre-line; } .ins-fatos { margin: 0.4rem 0 0; } .ins-fatos span { display: inline-block; padding: 0.05rem 0.5rem; font-size: var(--fs-xs); font-weight: 700; color: var(--cinza); border: 1px solid var(--borda); } .ins-publico { margin: 0.4rem 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--cinza); } .ins-publico strong { color: var(--tinta); } /* O texto do proponente, como na programação do site */ .ins-mais .pg-sobre { max-width: 70ch; margin-top: 0.4rem; } .ins-mais .pg-sobre p { margin: 0 0 0.7rem; line-height: 1.6; white-space: normal; } .ins-mais .pg-sobre-lead { font-size: 1.02rem; line-height: 1.55; } .pg-tx-lista { margin: 0 0 0.7rem; padding-left: 1.2rem; line-height: 1.55; } .pg-tx-lista li { margin-bottom: 0.35rem; } .pg-tx-fatos { list-style: none; display: grid; gap: 0.3rem; margin: 0 0 0.7rem; padding: 0; line-height: 1.5; } .pg-tx-fatos li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); align-items: baseline; } .ins-mais .pg-tx-tags { margin: 0.2rem 0 0; font-size: var(--fs-xs); color: var(--cinza); } .ins-mais .pg-antes { max-width: 70ch; margin: 0.5rem 0; padding: 0.7rem 0.9rem; background: #FFF6E5; border-left: 3px solid #C77700; overflow-wrap: anywhere; } .ins-mais .pg-antes p { margin: 0 0 0.5rem; white-space: normal; } .ins-mais .pg-antes > :last-child { margin-bottom: 0; } .ins-mais .pg-antes-t { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8A5200; } .ins-equipe { display: grid; gap: 0.6rem; max-width: 70ch; margin-top: 0.7rem; } .ins-mais .ins-equipe-t { margin: 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cinza); } .ins-pessoa { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem; background: var(--superficie); border: 1px solid var(--borda); } .ins-pessoa img, .ins-pessoa-ini { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; } .ins-pessoa-ini { display: grid; place-items: center; font-size: 1.2rem; font-weight: 800; color: #1D6B3F; background: #E6F2EA; } .ins-mais .ins-pessoa p { display: grid; gap: 0.15rem; min-width: 0; margin: 0; white-space: normal; color: var(--cinza); } .ins-pessoa strong { color: var(--tinta); } .ins-mais .ins-arquivos { display: grid; gap: 0.3rem; margin-top: 0.7rem; white-space: normal; } .ins-arquivos small { color: var(--cinza); } .ins-confirma { max-width: 40rem; margin-inline: auto; padding: 1.2rem; background: var(--papel); border: 1px solid var(--borda); } .ins-confirma-acoes { display: grid; gap: 0.5rem; margin-top: 0.9rem; } .ins-confirma-acoes .btn { width: 100%; } .ins-acao { margin-top: 0.7rem; } .ins-acao form, .ins-acao .btn { width: 100%; } @media (min-width: 620px) { .ins-acao form, .ins-acao .btn { width: auto; } } .ins-recusa { margin: 0; padding: 0.55rem 0.7rem; font-size: var(--fs-sm); line-height: 1.4; background: var(--superficie); border-left: 3px solid var(--borda); } .ins-selo { display: inline-block; padding: 0.15rem 0.55rem; font-size: var(--fs-sm); font-weight: 800; color: #fff; } .ins-selo--vaga { background: #1D6B3F; } .ins-selo--fila { background: #8A5200; } .ins-selo--cancelada { background: var(--magenta-700); } .ins-minha--cancelada { opacity: 0.85; border-left: 4px solid var(--magenta-700); } .ins-minha form { margin-top: 0.5rem; } .ins-nomes { margin: 0; padding: 0.6rem 0.9rem 0.8rem 2.2rem; font-size: var(--fs-sm); border-top: 1px solid var(--borda); } .ins-nomes li { padding: 0.15rem 0; overflow-wrap: anywhere; } .ins-nome--fila { color: var(--cinza); } .afg-janela-nome { display: grid; gap: 0.25rem; width: 100%; margin-top: 0.6rem; font-size: var(--fs-sm); font-weight: 700; } .afg-janela-nome textarea { box-sizing: border-box; width: 100%; max-width: none; min-height: 4.2rem; padding: 0.5rem; font: inherit; font-weight: 400; } .afg-janela-tirar { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--borda); } /* «Aberto agora» em duas colunas, com o Circuito e as atividades no alto */ /* uma coluna por prazo aberto, até três (07/11/2026): a grade recebe --n, e o cartão sozinho ocupa a largura toda */ @media (min-width: 620px) { .prazos-grade--abertos { grid-template-columns: repeat(min(var(--n, 2), 2), minmax(0, 1fr)); } } @media (min-width: 980px) { .prazos-grade--abertos { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } } /* O cartão das atividades formativas: verde e azul, ao lado do magenta do Circuito */ .prazo--atividades { position: relative; overflow: hidden; isolation: isolate; color: #EFFAF3; border-color: #0B3A23; background: radial-gradient(90% 90% at 100% 0, rgba(255,194,31,.38), transparent 60%), linear-gradient(135deg, #1D6B3F 0%, #12144A 95%); } .prazo--atividades .prazo-estado { color: #FFE08A; } .prazo--atividades .prazo-t, .prazo--atividades .prazo-t a { color: #fff; } .prazo--atividades .prazo-d, .prazo--atividades .prazo-quando { color: rgba(239,250,243,.86); } .prazo--atividades .prazo-fatos li { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); } .prazo--atividades .prazo-chamada { margin: 0.7rem 0 0; font-size: 1.1rem; line-height: 1.35; font-weight: 800; color: #fff; } .prazo-minhas { display: flex; align-items: center; gap: 0.6rem; min-height: 3rem; margin-bottom: 0.5rem; padding: 0.45rem 0.8rem; font-weight: 800; text-decoration: none; color: #0B3A23; background: #E6F2EA; } .prazo-minhas:hover, .prazo-minhas:focus-visible { color: #0B3A23; background: #fff; } .prazo-minhas svg { flex: none; width: 1.5rem; height: 1.5rem; fill: #1D6B3F; stroke: none; } .prazo-minhas svg path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .prazo-minhas-t { flex: 1; min-width: 0; } .prazo-minhas-l { flex: none; font-size: var(--fs-sm); color: #1D6B3F; text-decoration: underline; text-underline-offset: 2px; } .prazo--atividades .prazo-acao { display: flex; justify-content: center; align-items: center; min-height: 3rem; padding: 0.55rem 0.8rem; text-align: center; color: #0B3A23; background: #fff; } .prazo--atividades .prazo-acao:hover, .prazo--atividades .prazo-acao:focus-visible { color: var(--magenta-700); } .esc-nomes { margin: 0.3rem 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--cinza); overflow-wrap: anywhere; } .esc-nomes strong { font-weight: 800; color: var(--magenta-700); } .esc-mic { width: 0.95em; height: 0.95em; margin-right: 0.15em; vertical-align: -0.12em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .jph-baixar { margin: 0.9rem 0 0; } .jph-turnos { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 0.3rem; } .jph-turnos legend { padding: 0 0 0.3rem; font-size: var(--fs-sm); font-weight: 700; } .jph-form .jph-turnos label { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.3rem 0.7rem; font-weight: 400; background: var(--papel); border: 1px solid var(--borda); cursor: pointer; } .jph-form .jph-turnos input { flex: none; width: 1.1rem; height: 1.1rem; padding: 0; } .jph-turnos small { display: block; } .jph-historico { margin-top: 2rem; } .jph-historico ol { list-style: none; margin: 0.6rem 0 0.3rem; padding: 0; font-size: var(--fs-sm); line-height: 1.45; } .jph-historico li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.1rem 0.8rem; padding: 0.5rem 0; border-top: 1px solid var(--borda); } .jph-historico time { color: var(--cinza); font-variant-numeric: tabular-nums; } .jph-historico small { display: block; color: var(--cinza); } @media (max-width: 560px) { .jph-historico li { grid-template-columns: minmax(0, 1fr); } } .jph-botao { padding: 0.55rem 0.9rem; min-height: 2.75rem; text-align: center; justify-content: center; } @media (max-width: 560px) { .jph-quem, .jph-marca { flex-basis: 100%; } .jph-acao { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.7rem; } .jph-acao form, .jph-botao { width: 100%; } } .prazo-vagas { display: grid; gap: 0.25rem; margin-bottom: 0.6rem; font-size: 0.875rem; line-height: 1.45; } .prazo-vagas p { margin: 0; } .prazo-vagas .prazo-vagas-t { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #1D6B3F; } .prazo-meu { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.6rem; padding: 0.35rem 0.55rem; background: var(--superficie); border-left: 3px solid var(--indigo-700); font-size: var(--fs-xs); font-weight: 700; color: var(--indigo-700); text-decoration: none; } .prazo-meu span:first-child { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--indigo-700) 35%, transparent); } .prazo-meu:hover span:first-child { text-decoration-color: currentColor; } /* A seta anda um fio para a direita no hover, como a da ação do cartão. */ .prazo-meu-seta { transition: transform 0.12s ease; } .prazo-meu:hover .prazo-meu-seta { transform: translateX(2px); } .prazo-acao { margin-top: 0.6rem; font-size: var(--fs-xs); font-weight: 800; color: var(--indigo-700); text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; } .prazo-acao:hover { text-decoration: underline; } /* ---------- as telas de erro ---------- */ /* * Um número sozinho não diz nada a quem esbarra nele. A tela diz o que houve, * por que costuma acontecer e por onde sair — e usa as cores das dezoito ODS, * que é o que a JIEPE tem de bonito para mostrar numa hora em que não há o que * mostrar. */ .erro { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; background: var(--superficie); } .erro-caixa { width: min(34rem, 100%); background: var(--papel); border: 1px solid var(--borda); } /* A fita ocupa a largura toda, e cada objetivo tem a mesma fatia: nenhum vale mais que o outro. */ .erro-fita { display: flex; height: 8px; } .erro-fita span { flex: 1; } .erro-n { font-family: var(--mono); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.18em; color: var(--cinza-fraco); margin: 1.6rem 1.75rem 0; } .erro-t { font-size: clamp(1.3rem, 3.2vw, 1.75rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-wrap: pretty; margin: 0.35rem 1.75rem 0; } .erro-d { margin: 0.9rem 1.75rem 0; } .erro-d p { font-size: var(--fs-sm); line-height: 1.55; color: var(--cinza); margin: 0 0 0.7rem; } .erro-d strong { color: var(--tinta); } .erro-saidas { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; margin: 1.2rem 1.75rem 0; } .erro-saidas a { font-size: var(--fs-sm); font-weight: 700; color: var(--indigo-700); } /* A central do Hub fecha a caixa, no mesmo filete magenta que a destaca na entrada e no rodapé dos e-mails. */ .erro-ajuda { margin: 1.4rem 0 0; padding: 0.8rem 1.75rem; border-top: 1px solid var(--borda); background: var(--superficie); font-size: var(--fs-xs); color: var(--cinza); } .erro-ajuda a { color: var(--indigo-700); font-weight: 700; } /* ---------- a confirmação de excluir ---------- */ /* * A caixa do navegador põe o domínio no título e oferece «OK», que não diz o * que vai acontecer. Esta nomeia a ação no botão — «Excluir rascunho» — e tem * onde explicar o que se perde. */ .confirma { width: min(28rem, calc(100% - 2rem)); border: 1px solid var(--borda); background: var(--papel); color: var(--tinta); padding: 1.4rem 1.5rem; box-shadow: 0 18px 50px rgb(18 18 43 / 0.18); } .confirma::backdrop { background: rgb(18 18 43 / 0.45); } .confirma--erro { border-top: 6px solid var(--magenta-700); } .confirma--erro .confirma-t { color: var(--magenta-700); } .confirma--erro .confirma-d { color: var(--tinta); padding-left: 1.1rem; } .confirma--erro li + li { margin-top: 0.4rem; } .confirma-t { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; margin: 0; text-wrap: pretty; } .confirma-d { font-size: var(--fs-sm); color: var(--cinza); line-height: 1.5; margin: 0.6rem 0 0; } .confirma-acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; justify-content: flex-end; } /* O botão que apaga é o único em magenta na tela: ele carrega a consequência, e o «Manter» fica com o contorno, que é o caminho de quem hesitou. */ .btn-risco { background: var(--magenta-700); border: 1px solid var(--magenta-700); color: #fff; } .btn-risco:hover { background: var(--tinta); border-color: var(--tinta); } /* ---------- os projetos do perfil ---------- */ /* * A mesma anatomia dos cartões de «Meus envios», em corpo menor: aqui não há * ação nenhuma, é uma conferência. O que não serve à edição corrente fica * apagado, e não escondido — sumir com ele deixaria a pessoa procurando. */ /* Cada área é um bloco fechado, com filete e contagem: numa lista corrida de treze projetos, saber onde a pesquisa termina e a extensão começa custava ler todos. */ .perfil-area { margin-top: 1.5rem; } .perfil-area-t { display: flex; align-items: baseline; gap: 0.5rem; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.02em; padding-bottom: 0.35rem; border-bottom: 2px solid var(--indigo-700); margin: 0; } .perfil-area-n { font-size: var(--fs-xs); font-weight: 700; color: var(--cinza); } .perfil-projetos { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.4rem; } .perfil-projeto { border: 1px solid var(--borda); border-left: 4px solid var(--indigo-700); background: var(--papel); padding: 0.6rem 0.8rem; } .perfil-projeto-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; margin: 0; font-size: var(--fs-xs); color: var(--cinza); } .perfil-projeto-t { font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; margin: 0.3rem 0 0; } /* A obrigação é a única coisa da lista que muda o que a pessoa tem de fazer: fica no magenta de acento, e não no cinza das outras linhas. */ .perfil-obriga { font-size: var(--fs-xs); font-weight: 700; color: var(--magenta-700); margin: 0.35rem 0 0; } /* ---------- painel de quem administra ---------- * * Prefixo `admin-`, e não `painel-`: o CSS do site já usa `.painel` no gráfico * de ODS da home, com `display:grid` de duas colunas e `color:#fff`. Como esta * folha é carregada junto da do site, os cartões herdavam as duas colunas — e * texto branco sobre fundo claro. Nome que já existe no vizinho não é nome * livre. */ .admin { padding-block: clamp(1.75rem, 4vw, 2.75rem) 4rem; } .admin-numeros { display: grid; gap: 0.7rem; margin: 0.9rem 0 0.4rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); } .admin-numero { border: 1px solid var(--borda); background: var(--superficie); padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; } .admin-numero--destaque { border-color: var(--indigo-700); background: var(--papel); } .admin-valor { font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; } .admin-numero--destaque .admin-valor { color: var(--indigo-700); } /* O número agora é link: sublinhado não, que a moldura já diz que é um alvo; mas o alvo tem de se anunciar ao passar e ao receber o foco do teclado. */ .admin-numero { color: inherit; text-decoration: none; } .admin-numero:hover { border-color: var(--indigo-700); } .admin-numero:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 2px; } /* Os caminhos para a fila, que mora na lista de resumos. */ .admin-fila-ir { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 1.4rem; } .admin-rotulo { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.35; } .admin-estados { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.3rem; font-size: var(--fs-sm); } .admin-estados li { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.35rem 0.6rem; border-left: 3px solid var(--borda); background: var(--superficie); } .admin-estados .num { font-weight: 800; min-width: 2ch; text-align: right; } .admin-pendente { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--borda); font-style: italic; } /* ---------- o balão de ajuda ---------- */ /* * A central do Hub já está no rodapé e nos e-mails, mas a dúvida aparece no * meio do formulário, e ninguém rola até o rodapé para perguntar. Fica preso * no canto, pequeno o bastante para não disputar com o texto. */ /* O verde é o do WhatsApp, #25D366: é ele que diz, sem escrever, para onde o clique leva. A tinta é a escura da casa, e não o branco que o botão do WhatsApp usa — branco sobre esse verde dá 1,9:1, e o rótulo aqui tem 0,75rem. Escuro sobre o mesmo verde dá 9,2:1, e o verde continua o deles. */ .ajuda-balao { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; background: #25D366; color: #12122B; font-size: var(--fs-xs); font-weight: 800; text-decoration: none; box-shadow: 0 10px 24px rgb(18 18 43 / 0.22); } /* O verde escuro da marca no hover — 7,7:1 com o branco, que aí pode entrar. */ .ajuda-balao:hover { background: #075E54; color: #fff; } .ajuda-balao:focus-visible { outline: 3px solid var(--indigo-700); outline-offset: 2px; } .ajuda-balao-icone { display: inline-flex; } /* O `2026.css` põe uma seta em todo link que abre em outra aba. Aqui o ícone do WhatsApp já diz para onde vai, e a seta ficava sobrando dentro do botão. */ .ajuda-balao::after { content: none !important; } /* Em tela estreita fica só o ícone: a barra de ações do formulário já divide esse canto com ele, e duas palavras a mais o fariam cobrir um botão. */ @media (max-width: 520px) { .ajuda-balao { padding: 0.7rem; border-radius: 0; } .ajuda-balao-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* ---------- listas do painel ---------- */ .admin-busca { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1.25rem 0; } .admin-busca input, .admin-busca select { font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--borda); background: var(--papel); color: var(--tinta); } .admin-busca input[type="search"] { flex: 1 1 14rem; } /* Os números de um aviso em massa, lidos como frases: lista comum, e não a `.admin-lista`, que desenha cada item em colunas de ficha. */ .aviso-numeros { margin: 0.75rem 0; padding-left: 1.1rem; } .aviso-numeros li { margin: 0.25rem 0; line-height: 1.5; } .admin-lista { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.4rem; } .admin-lista li { border: 1px solid var(--borda); background: var(--papel); padding: 0.7rem 0.9rem; display: grid; gap: 0.35rem 1rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 760px) { .admin-lista li { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) auto; } } .admin-lista-quem { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; min-width: 0; } .admin-lista-titulo { font-weight: 700; color: var(--tinta); text-decoration: none; } .admin-lista-titulo:hover { color: var(--indigo-700); } .admin-lista-email { font-size: var(--fs-xs); color: var(--cinza); } .admin-lista-marcas { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; } .admin-lista-conta { font-size: var(--fs-xs); color: var(--cinza); } .admin-lista-acao { justify-self: start; } @media (min-width: 760px) { .admin-lista-acao { justify-self: end; } } .admin-lista-nota { font-size: var(--fs-xs); color: var(--cinza-fraco); white-space: nowrap; } .admin-papel { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: var(--indigo-700); border: 1px solid var(--borda); padding: 0.15rem 0.4rem; } .admin-papel--frio { color: var(--cinza-fraco); } /* Os atalhos do painel. No estreito, botões de larguras diferentes quebram em duas e três por linha e sobra uma escadinha; em grade de duas colunas iguais as bordas se alinham, e o ímpar do fim ocupa a linha inteira em vez de ficar sozinho à esquerda. */ .admin-atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--borda); } /* `.btn` do site é inline-flex, então quem centra é o justify-content — o text-align não chega ao conteúdo. */ .admin-atalhos .btn { justify-content: center; } .admin-atalhos .btn:last-child:nth-child(odd) { grid-column: 1 / -1; } @media (min-width: 720px) { .admin-atalhos { display: flex; flex-wrap: wrap; gap: 0.6rem; } } /* ---------- a lista de conferência, em colunas ---------- */ /* * O painel compara: o que chegou primeiro, o que ainda espera parecer, quantos * são de cada área. Cartão empilhado responde mal a isso — cada um tem altura * diferente conforme o título, e o olho não desce reto. * * A linha inteira é o link, e não só o título: a área de clique de uma lista de * conferência é a linha, e mirar num texto de 14px é trabalho. * * No estreito as colunas viram duas: código com estado em cima, título abaixo, * e o resto numa linha de metadados. Seis colunas em 390px não são lista, são * confete. */ .admin-tabela { margin: 1rem 0; border-top: 1px solid var(--borda); } .admin-tabela-cabeca, .admin-tabela-linha { display: grid; gap: 0.35rem 0.9rem; align-items: center; padding: 0.65rem 0.2rem; border-bottom: 1px solid var(--borda); } .admin-tabela-cabeca { display: none; } /* No estreito, três faixas: identificação, título, e o resto numa linha de metadados. Seis colunas em 390px não são lista, são confete. A colocação fica dentro do `max-width` de propósito: fora dele, desfazê-la com `grid-area: auto` deixava um item colocado e os outros à deriva, e as células se sobrepunham. Melhor cada largura declarar a sua. */ @media (max-width: 899px) { .admin-tabela-linha { grid-template-columns: auto minmax(0, 1fr) auto; } .admin-tabela-linha > .sub-codigo { grid-area: 1 / 1 / 2 / 2; } .admin-tabela-linha > .sub-estado { grid-area: 1 / 3 / 2 / 4; justify-self: end; } .admin-tabela-t { grid-area: 2 / 1 / 3 / 4; } .admin-tabela-area { grid-area: 3 / 1 / 4 / 2; } .admin-tabela-quem { grid-area: 3 / 2 / 4 / 3; } .admin-tabela-quando { grid-area: 3 / 3 / 4 / 4; justify-self: end; } /* O campus sobe para a faixa de identificação, ao lado do código: embaixo ele seria o quarto metadado e ficaria sozinho numa linha só dele. */ .admin-tabela-campus { grid-area: 1 / 2 / 2 / 3; } /* Nas obrigatórias, a bolsa entra na faixa de baixo, ao lado do resto. */ .admin-tabela-bolsa { grid-area: 4 / 1 / 5 / 4; } /* Resumos: a caixa de escolher abre a faixa de identificação, e embaixo os quatro metadados dividem a linha — área, quem assina, quem confere e a data. */ .admin-tabela--resumos .admin-tabela-linha { grid-template-columns: auto auto minmax(0, 1fr) auto; } .admin-tabela--resumos .admin-tabela-escolher { grid-area: 1 / 1 / 2 / 2; } .admin-tabela--resumos > .admin-tabela-linha > .sub-codigo { grid-area: 1 / 2 / 2 / 3; } .admin-tabela--resumos > .admin-tabela-linha > .sub-estado { grid-area: 1 / 4 / 2 / 5; justify-self: end; } .admin-tabela--resumos .admin-tabela-t { grid-area: 2 / 1 / 3 / 5; } .admin-tabela--resumos .admin-tabela-area { grid-area: 3 / 1 / 4 / 2; } .admin-tabela--resumos .admin-tabela-quem { grid-area: 3 / 2 / 4 / 3; } .admin-tabela--resumos .admin-tabela-revisor { grid-area: 3 / 3 / 4 / 4; } .admin-tabela--resumos .admin-tabela-quando { grid-area: 3 / 4 / 4 / 5; justify-self: end; } /* Pessoas: nome com os papéis em cima, e-mail no meio, e embaixo o que se conta e o que se faz. */ .admin-tabela-nome { grid-area: 1 / 1 / 2 / 3; } .admin-tabela-papeis { grid-area: 1 / 3 / 2 / 4; justify-self: end; } .admin-tabela-email { grid-area: 2 / 1 / 3 / 4; } .admin-tabela-conta { grid-area: 3 / 1 / 4 / 2; } .admin-tabela--pessoas .admin-tabela-quando { grid-area: 3 / 2 / 4 / 3; justify-self: start; } .admin-tabela-acao { grid-area: 3 / 3 / 4 / 4; justify-self: end; } } .admin-tabela-linha { color: var(--tinta); text-decoration: none; } .admin-tabela-linha:hover { background: var(--superficie); } .admin-tabela-linha:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: -2px; } .admin-tabela-t { font-weight: 700; line-height: 1.35; } .admin-tabela-d { font-size: var(--fs-xs); color: var(--cinza); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-tabela-mais { color: var(--cinza-fraco); } .admin-tabela-selos { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; } .admin-tabela-selos img { display: block; } .admin-tabela-sob { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--cinza); overflow-wrap: anywhere; } .admin-tabela-papeis { display: flex; flex-wrap: wrap; gap: 0.25rem; min-width: 0; } .admin-tabela-acao { justify-self: end; } @media (min-width: 900px) { .admin-tabela-acao { justify-self: end; } } .admin-tabela .sub-codigo, .admin-tabela .sub-estado { justify-self: start; } /* O cabeçalho de grupo da lista de resumos — área · categoria · edital. Fica no fluxo, e não grudado no alto: a lista se lê de cima a baixo, e um rótulo fixo come uma linha de cada tela no telefone, que é onde ela já é mais apertada. O que separa os grupos é o ar acima do rótulo, não um traço mais grosso: a lista já tem uma linha por trabalho, e mais uma régua forte a cada grupo vira grade. */ .admin-grupo { display: flex; align-items: baseline; gap: 0.6rem; padding: 1.5rem 0.2rem 0.4rem; } .admin-tabela > .admin-grupo:first-child { padding-top: 0.6rem; } /* Numa linha, cortado, como o título do trabalho logo abaixo — e pela mesma razão. O edital que a plataforma reconhece tem o nome curto do regulamento; o que ela não reconhece vem cru do UFTMnet e chega a 124 caracteres («Edital nº 55/2025/PROPPG/UFTM - Inscrição para seleção de candidatos a bolsas…»). Inteiro, ele decide sozinho a altura do cabeçalho e empurra a contagem para fora. O que distingue está no começo; o resto fica no `title`. */ .admin-grupo-t { font-weight: 600; color: var(--tinta); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-grupo-n { margin-left: auto; flex: none; color: var(--cinza); font-size: 0.9rem; } /* A troca entre a vista separada e a corrida. */ .admin-vista { margin: 0.4rem 0 0; color: var(--cinza); font-size: 0.9rem; } /* O recorte em vigor — hoje o edital, vindo de uma linha do painel. Precisa pesar mais que a linha da vista logo acima: aquela informa como a lista está desenhada, esta diz que **falta coisa** na lista. Quem chegou pelo painel vê uma lista curta, e sem isto ela se lê como a lista inteira. */ .admin-recorte { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; margin: 0.7rem 0 0; padding: 0.5rem 0.7rem; border-left: 3px solid var(--indigo-700); background: var(--superficie); } .admin-recorte-t { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } @media (min-width: 900px) { .admin-tabela-cabeca, .admin-tabela-linha { display: grid; } /* Cada lista com as suas colunas; o resto do desenho é o mesmo, porque quem administra vai das duas na mesma sessão. */ /* Oito células: a de escolher, o código, o trabalho, a área, quem assina, quem confere, o estado e a data. Autores e revisor em colunas separadas porque são duas perguntas — quem escreveu, e com quem está. */ .admin-tabela--resumos .admin-tabela-cabeca, .admin-tabela--resumos .admin-tabela-linha { grid-template-columns: 1.4rem 6rem minmax(0, 1fr) 6.5rem minmax(0, 9rem) minmax(0, 8rem) 7.5rem 5.5rem; } .admin-tabela--atividades .admin-tabela-cabeca, .admin-tabela--atividades .admin-tabela-linha { grid-template-columns: 6rem minmax(0, 1fr) 8rem 6rem minmax(0, 9rem) 7.5rem 5.5rem; } .admin-tabela--obrigatorios .admin-tabela-cabeca, .admin-tabela--obrigatorios .admin-tabela-linha { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 7.5rem) 5.5rem 8.5rem minmax(0, 8rem) 7rem; } /* Aqui o nome vem com o endereço embaixo: é lista de trabalho — quem a abre vai escrever para essa gente —, e um e-mail cortado não serve para isso. */ .admin-tabela--obrigatorios .admin-tabela-nome { white-space: normal; } /* A data vale 5.5rem, como na lista de resumos: as duas mostram «8/09 09:23», e 4rem era a medida de quando esta aqui mostrava só «8/09» — a hora entrou e saiu cortada no meio, «8/09 09». */ .admin-tabela--fila .admin-tabela-cabeca, .admin-tabela--fila .admin-tabela-linha { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 12rem) 5.5rem; } .admin-tabela--pessoas .admin-tabela-cabeca, .admin-tabela--pessoas .admin-tabela-linha { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 8rem) 5rem 4.5rem 10rem; } /* Uma linha só por trabalho: o título é longo e maiúsculo porque vem do edital, e inteiro ele decide sozinho a altura de cada linha. O completo está no parecer, a um clique — e no `title` de quem passa o mouse. */ .admin-tabela-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .admin-tabela-r { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--cinza); text-decoration: none; white-space: nowrap; } a.admin-tabela-r:hover { color: var(--indigo-700); } .admin-tabela-seta { color: var(--cinza-fraco); } a.admin-tabela-r:hover .admin-tabela-seta { color: inherit; } .admin-tabela-r[aria-current] { color: var(--indigo-700); } /* Contagem fora do limite: cor de alerta e não de erro — o rascunho ainda está sendo escrito, e quem lê é a comissão, que não vai consertar isso. */ .admin-fora { color: var(--alerta); } .admin-fora-nota { color: var(--alerta); margin-top: 0.3rem; } /* A autoria no conserto: uma linha por autor, com os campos lado a lado no largo e empilhados no estreito — é formulário de reparo, não de escrita. */ .admin-autores { display: grid; gap: 0.5rem; margin: 0.75rem 0 0.5rem; } .admin-autor { display: grid; gap: 0.4rem; padding: 0.6rem 0.7rem; border: 1px solid var(--borda); background: var(--papel); } .admin-autor input[type="text"], .admin-autor input[type="email"] { margin: 0; } /* As marcas numa faixa só delas, abaixo dos campos. Na mesma linha, cada cartão media as colunas conforme o que havia à direita — «correspondente» numa, «remover» noutra, nada na terceira —, e as três larguras saíam diferentes: nenhum campo alinhava com o de cima. */ .admin-autor-marcas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.1rem 0 0; } .admin-autor-marca { display: flex; align-items: center; gap: 0.35rem; font-size: var(--fs-xs); color: var(--cinza); margin: 0; } .admin-autor-marca--fixa { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--indigo-700); } .admin-autor-marca--tirar { color: var(--magenta-700); } /* O público da atividade, no conserto da proposta: as caixas lado a lado. */ .admin-publicos { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.4rem 0 0.8rem; padding: 0; border: 0; } .admin-publicos .admin-autor-marca { font-size: var(--fs-sm); color: var(--tinta); } .admin-autores-acao { margin: 0 0 1.5rem; } /* As setas vão para a ponta direita da faixa. O `[hidden]` é explícito porque `.autor-ordem` declara `display: flex`, que venceria o atributo. */ .admin-autor-ordem { margin-left: auto; } .admin-autor-ordem[hidden] { display: none; } @media (min-width: 760px) { .admin-autor { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } } /* A volta do painel. Botão, e não a palavra sublinhada: é o alvo mais usado destas telas, e um link de 12px em caixa alta pede pontaria demais. */ .admin-voltar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin: 0 0 0.9rem; } .admin-voltar .btn { gap: 0.35rem; } /* A área em que se está, entre as irmãs. */ .admin-atalhos--areas { margin-top: 0; padding-top: 0; border-top: 0; } .admin-area-atual { border-color: var(--indigo-700); color: var(--indigo-700); } /* Campo com uma resposta só. Ocupa o lugar do select para a linha não desalinhar, e lê como o que é: um dado do formulário que não se escolhe. O rótulo tem o mesmo tamanho dos outros; o valor, o peso de um campo preenchido. */ .campo-fixo-r { display: block; font-size: var(--fs-sm); font-weight: 700; margin-top: 1rem; } .campo-fixo { margin: 0.35rem 0 0; padding: 0.55rem 0; color: var(--cinza); } /* ---------- de quem é o trabalho ---------- */ /* * O controle de atribuir mora na linha da fila: um select e um botão, lado a * lado, sem rótulo visível — a coluna já diz o que é, e o rótulo repetido em * dez linhas seria dez vezes a mesma palavra. * * O select encolhe até caber; o nome longo corta, e o título completo do * `option` continua acessível ao abrir a lista. */ .admin-atribuir { display: flex; align-items: center; gap: 0.45rem; } /* O select da linha veste-se como os campos do formulário — mesma borda, mesmo papel, a mesma seta desenhada por nós. Sem isto ele vinha com o desenho cru do navegador: alto demais para a linha, e de outro sistema no meio de uma tela inteira vestida. `text-overflow` para o nome longo cortar em vez de esticar a coluna: quem escolhe abre a lista, e ali o nome aparece inteiro. */ .admin-atribuir select { font: inherit; font-size: var(--fs-xs); min-width: 0; max-width: 11rem; text-overflow: ellipsis; padding: 0.3rem 1.6rem 0.3rem 0.5rem; border: 1px solid var(--borda); background-color: var(--papel); color: var(--tinta); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%232D2B4E' stroke-width='1.6' d='M1 1l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 0.55rem; } .admin-atribuir select:hover { border-color: var(--indigo-700); } .admin-atribuir select:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 1px; } /* Fora da fila, o mesmo controle precisa de presença. Na tabela ele é uma célula entre dezenas, e o tamanho miúdo é o que deixa a coluna caber. Sozinho entre o bloco dos ODS e o do parecer, aquele tamanho parecia campo esquecido — e «passar» sublinhado em magenta, no meio de uma tela de botões, lia como «saiba mais». O select veste-se como os campos de `.form-resumo`: mesmo `padding`, mesma seta, mesma posição. `align-items: stretch` iguala a altura dele à do botão sem eu ter de adivinhar número nenhum, e `flex: 1 1` deixa o nome longo caber em vez de cortar — aqui há largura, ao contrário da coluna. */ .admin-atribuir--solta { margin-top: 0.55rem; gap: 0.6rem; align-items: stretch; flex-wrap: wrap; } .admin-atribuir--solta select { font-size: inherit; flex: 1 1 16rem; max-width: 26rem; text-overflow: clip; padding: 0.6rem 2.2rem 0.6rem 0.75rem; background-position: right 0.8rem center; background-size: 0.65rem; } /* O botão do sistema tem borda de 2px; sem descontar, ele fica dois pixels mais alto que o campo ao lado. */ .admin-atribuir--solta .btn { padding: 0.5rem 1.1rem; } /* «correção», ao lado do título na fila: diz que este voltou, e por isso se lê diferente. Discreto de propósito — é adjetivo do título, não estado. */ .admin-tabela-marca { display: inline-block; margin-left: 0.4rem; vertical-align: 0.08em; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--magenta-700); } /* Ação com seta: a palavra e o sinal andam juntos, e a seta não encolhe quando a coluna aperta. */ .ligacao--acao { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; } .ligacao--acao svg { flex: none; } /* O título é o que abre o parecer, agora que a linha inteira deixou de ser link — botão dentro de link é armadilha para quem usa teclado. */ .admin-tabela-abre { color: var(--tinta); text-decoration: none; } .admin-tabela-abre:hover { text-decoration: underline; } /* O que não entrou no lote, e por quê. */ .admin-recusados { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: var(--fs-sm); } /* Escolher vários na lista de resumos, para mandar de uma vez. A linha escolhida se marca por dois sinais, e não só pela cor: a barra na borda esquerda acompanha a caixa marcada. */ .admin-tabela-escolher { display: flex; align-items: center; min-width: 0; } .admin-tabela-escolher input { margin: 0; } .admin-tabela-linha--escolhida { background: var(--superficie); box-shadow: inset 3px 0 0 var(--indigo-700); } /* A barra gruda no fim da tela enquanto se escolhe: a lista tem vinte e cinco linhas, e um botão no rodapé sairia de vista logo na terceira escolha. */ .lote-barra { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: 0.6rem; padding: 0.7rem 0.9rem; border: 1px solid var(--indigo-700); background: var(--papel); box-shadow: 0 -0.4rem 0.8rem rgba(0, 0, 0, 0.06); } .lote-contagem { font-size: var(--fs-sm); font-weight: 800; } .lote-todos { display: flex; align-items: center; gap: 0.35rem; font-size: var(--fs-xs); color: var(--cinza); } .lote-barra select { font: inherit; font-size: var(--fs-sm); padding: 0.4rem 0.6rem; border: 1px solid var(--borda); background: var(--papel); color: var(--tinta); max-width: 100%; } .lote-barra button[disabled] { opacity: 0.5; cursor: not-allowed; } /* A dica dos atalhos vai por último e quebra sozinha no estreito: é ajuda, não instrução — sem ela a escolha um a um continua funcionando. */ .lote-dica { flex-basis: 100%; font-size: var(--fs-xs); color: var(--cinza-fraco); } /* A escolha antes da prévia: quantos, e entre quem. */ .admin-distribuir-escolha { align-items: flex-start; } .admin-distribuir-escolha input[type="number"] { width: 6rem; } .admin-distribuir-quem { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; border: 0; margin: 0; padding: 0; } .admin-distribuir-quem legend { font-size: var(--fs-xs); color: var(--cinza); text-transform: uppercase; letter-spacing: 0.06em; padding: 0; margin-bottom: 0.2rem; } .admin-distribuir-nome { display: flex; align-items: center; gap: 0.3rem; font-size: var(--fs-sm); } @media (min-width: 900px) { /* A fila ganha uma quinta coluna quando se pode atribuir nela; sem o controle, continua com as quatro de antes. */ .admin-tabela--fila-atribui .admin-tabela-cabeca, .admin-tabela--fila-atribui .admin-tabela-linha { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 10rem) 5.5rem minmax(0, 13rem); } .admin-tabela--time .admin-tabela-linha { grid-template-columns: minmax(0, 1fr) 8rem 8rem minmax(0, 11rem) minmax(0, 9rem); } .admin-tabela--plano .admin-tabela-linha { grid-template-columns: 6rem minmax(0, 1fr) 4rem; } } /* O menu do painel, no alto de cada tela. Mesmo lugar e mesmo peso da volta que ele substituiu: navegação lida antes do título não deve pesar mais que o título. Quebra em quantas linhas precisar — quem cuida de duas áreas tem dois itens a mais que quem cuida de uma, e o telefone é onde se lê a fila de pareceres. A tela em que se está fica marcada como as áreas irmãs já ficavam: nunca só pela cor, que o `aria-current` acompanha. */ /* As colunas na largura do texto, sem quebrar nome nenhum, separadas por um fio suave (05/11/2026). Coluna que não cabe desce inteira para a linha de baixo. */ .admin-menu { display: flex; flex-wrap: wrap; gap: 0.9rem 0; margin: 0 0 1.6rem; padding: 0.9rem 1.2rem; background: var(--superficie); border: 1px solid var(--borda); border-top: 3px solid var(--indigo-700); } /* Cada categoria é uma coluna: o nome pequeno em cima e os links em lista. A tela em que se está fica marcada pela cor e por um fio à esquerda, nunca só pela cor, que o `aria-current` acompanha. */ .admin-menu-grupo { flex: 1 1 auto; min-width: 0; padding-inline: 0.75rem; border-left: 1px solid var(--borda); } .admin-menu-grupo:first-child { padding-left: 0; border-left: 0; } .admin-menu-link { white-space: nowrap; } .admin-menu-grupo-t { margin: 0 0 0.4rem; padding-left: calc(0.6rem + 3px); font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cinza); } .admin-menu-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; } .admin-menu-link { display: block; padding: 0.2rem 0 0.2rem 0.6rem; border-left: 3px solid transparent; font-size: var(--fs-sm); font-weight: 700; color: var(--tinta); text-decoration: none; } .admin-menu-link:hover { color: var(--indigo-700); border-left-color: var(--borda); } @media (max-width: 40rem) { .admin-menu { gap: 0.8rem 0.8rem; padding: 0.8rem; } } /* No celular, a barra que recolhe o menu; no resto, ela não existe. */ .admin-menu-abre { display: none; } @media (max-width: 760px) { .admin-menu-abre { display: flex; align-items: center; gap: 0.2rem 0.7rem; flex-wrap: wrap; position: relative; min-height: 3rem; padding: 0.6rem 2.6rem 0.6rem 0.9rem; list-style: none; cursor: pointer; background: var(--superficie); border: 1px solid var(--borda); border-top: 3px solid var(--indigo-700); } .admin-menu-abre::-webkit-details-marker { display: none; } .admin-menu-abre::after { content: ''; position: absolute; right: 1rem; top: 50%; width: 0.55rem; height: 0.55rem; margin-top: -0.4rem; border-right: 2.5px solid var(--indigo-700); border-bottom: 2.5px solid var(--indigo-700); transform: rotate(45deg); } .admin-menu-caixa[open] .admin-menu-abre::after { margin-top: -0.1rem; transform: rotate(-135deg); } .admin-menu-abre span { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cinza); } .admin-menu-abre strong { font-size: var(--fs-sm); color: var(--indigo-700); } .admin-menu-caixa > .admin-menu { margin-top: 0; border-top: 0; } .admin-menu-link { padding-block: 0.45rem; } } .admin-menu-atual, .admin-menu-atual:hover { color: var(--indigo-700); border-left-color: var(--indigo-700); font-weight: 800; } /* A barra de dentro da casa «Dados». Não são botões como os do menu de cima: repetir a mesma forma dois níveis seguidos faria a segunda barra parecer outro menu, e não o de dentro. Aqui é texto, com a aba em que se está sublinhada — o peso visual cai, e a hierarquia se lê sem legenda. */ .admin-abas { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; margin: -0.4rem 0 1.4rem; font-size: var(--fs-sm); } .admin-aba { color: var(--cinza); text-decoration: none; padding-block: 0.2rem; border-bottom: 2px solid transparent; } .admin-aba:hover { color: var(--indigo-700); } .admin-aba-atual { color: var(--tinta); font-weight: 700; border-bottom-color: var(--indigo-700); } /* ---------- a faixa de quem está imitando alguém ---------- */ .imitando { background: var(--magenta-700); color: #fff; } .imitando-linha { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; padding-block: 0.6rem; font-size: var(--fs-sm); } .imitando strong { font-weight: 800; } .imitando-sair { font: inherit; font-size: var(--fs-xs); font-weight: 800; cursor: pointer; background: #fff; color: var(--magenta-700); border: 0; padding: 0.4rem 0.8rem; white-space: nowrap; } .imitando-sair:hover { background: var(--papel); } .paginacao { display: flex; gap: 1rem; align-items: baseline; margin: 1.25rem 0; font-size: var(--fs-sm); } .paginacao-onde { color: var(--cinza); } .paginacao-fim { color: var(--cinza-fraco); } /* ============================================================ Os guias do participante ============================================================ Duas páginas de leitura corrida — como enviar um resumo, como propor uma atividade formativa — dentro da mesma casca das telas de tarefa. Tudo prefixado `guia-`: o `2026.css` carrega junto e nome genérico aqui é herança silenciosa, não erro. Conferidos os 26 contra as duas folhas. A coluna é mais estreita que o `.wrap` de 1180px, e de propósito: 1180 serve a grade de cartões, e não a linha de texto. Aqui a medida é a leitura, perto de 66 caracteres. */ /* A página tem a largura das outras — o `.wrap` de 1180px, com a mesma margem e a mesma borda esquerda. Antes ela era uma coluna de 44rem centrada, e por isso o guia começava num lugar em que nenhuma outra tela começa. Tudo acompanha essa largura, sem medida de leitura por dentro. Foi decisão de quem lê a tela: com o vídeo ocupando o wrap e o quadro de prazos parando antes, os dois pareciam de páginas diferentes. Preferiu-se a borda direita alinhada à linha de texto mais curta. */ .guia { padding-block: clamp(1.75rem, 4vw, 2.75rem) 4rem; } .guia-t { font-size: clamp(1.9rem, 5vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0.4rem 0 0; text-wrap: pretty; } .guia-lede { margin-top: 1rem; font-size: 1.06rem; color: var(--cinza); } .guia p { margin-top: 0.85rem; } /* O quadro do alto: as quatro ou cinco coisas que decidem se a pessoa consegue fazer isso hoje. Antes do texto porque é o que ela veio saber. */ .guia-fatos { margin-top: 2rem; padding: 1.15rem 1.25rem; background: var(--superficie); border-left: 4px solid var(--magenta-500); display: grid; gap: 0.85rem; } .guia-fato { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.2rem 0.9rem; align-items: baseline; } .guia-fato dt { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cinza); } .guia-fato dd { margin: 0; } /* O mesmo desenho do perfil: risco fino magenta separando as partes, e o título no magenta de texto. */ .guia-h { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--magenta-500); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; color: var(--magenta-700); text-wrap: pretty; } .guia-h-r { display: block; margin-bottom: 0.3rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cinza); } .guia-lista { margin-top: 0.85rem; padding-left: 1.25rem; } .guia-lista li { margin-top: 0.4rem; } .guia-lista li::marker { color: var(--cinza-fraco); } /* ---------- os passos ---------- O número é o mesmo que a régua do formulário mostra. Numeração que não corresponde à tela é pior que numeração nenhuma: manda a pessoa procurar um passo 3 que lá se chama 2. */ .guia-passos { margin-top: 1.5rem; display: grid; gap: 2.25rem; } .guia-passo { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 1rem; } .guia-passo-n { font-size: 1.45rem; font-weight: 700; line-height: 1.3; color: var(--magenta-700); } .guia-passo-c { min-width: 0; } .guia-passo-c > :first-child { margin-top: 0; } .guia-passo-t { margin: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.3; text-wrap: pretty; } /* ---------- o que a tela diz ---------- As palavras exatas da interface. Quem procura ajuda procura pela frase que está vendo — então ela aparece aqui como está lá, e não parafraseada. */ .guia-tela { padding: 0.7rem 0.9rem; background: var(--papel); border: 1px solid var(--borda); } .guia-tela-r { display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cinza-fraco); } .guia-tela q { quotes: "\201C" "\201D"; font-style: normal; } .guia-nota { padding: 0.85rem 1rem; background: var(--superficie); border-left: 3px solid var(--magenta-700); font-size: var(--fs-sm); } .guia-nota--aviso { border-left-color: var(--alerta); } /* ---------- problemas ---------- Sintoma, causa, saída — nessa ordem, porque é nessa ordem que a pessoa chega: ela tem o sintoma na tela e não sabe o resto. */ .guia-problemas { margin-top: 1.5rem; display: grid; gap: 1.75rem; } .guia-problema { padding-left: 1rem; border-left: 3px solid var(--borda); } .guia-problema h3 { margin: 0; font-size: 1rem; font-weight: 800; } .guia-porque { color: var(--cinza); } .guia-faca { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px dotted var(--borda); } .guia-faca b { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ok); margin-right: 0.4rem; } .guia-faca .zap { display: inline-flex; vertical-align: baseline; } .guia-linha { margin-top: 1.4rem; } .guia-marco { display: grid; grid-template-columns: 8rem 1fr; gap: 0 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--borda); align-items: baseline; } .guia-marco:first-child { border-top: 1px solid var(--borda); } .guia-marco-d { font-size: var(--fs-sm); font-weight: 700; color: var(--magenta-700); } .guia-marco-q { font-size: 0.96rem; } .guia-marco-q small { display: block; color: var(--cinza); font-size: var(--fs-sm); } .guia-irmao { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--borda); font-size: var(--fs-sm); color: var(--cinza); } .guia .contatos-grade { margin-top: 1.2rem; } @media (max-width: 34rem) { .guia-fato, .guia-marco { grid-template-columns: 1fr; gap: 0.15rem; } .guia-passo { grid-template-columns: 1.8rem 1fr; gap: 0 0.7rem; } } /* ---------- os guias oferecidos na entrada ---------- Acima dos editais obrigatórios, e não abaixo: quem chega sem saber como fazer precisa da instrução antes da regra. Dois cartões, um por caminho — a pessoa reconhece o dela pelo nome e não lê o outro. */ .entrada-lado { display: grid; gap: 1.5rem; align-content: start; } .entrada-guias { display: grid; gap: 0.6rem; } .entrada-guias-t { margin: 0; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta-700); } .entrada-guia { display: block; padding: 0.85rem 1rem; background: var(--superficie); border-left: 3px solid var(--indigo-700); text-decoration: none; color: inherit; } .entrada-guia:hover { background: var(--papel); border-left-color: var(--magenta-700); } .entrada-guia b { display: block; font-weight: 800; color: var(--indigo-700); } /* Filho direto, e não qualquer span: sem o `>`, esta regra pegava também o selo dentro do e o transformava em barra cinza da largura do cartão. */ .entrada-guia > span { display: block; margin-top: 0.15rem; font-size: var(--fs-sm); color: var(--cinza); line-height: 1.4; } /* As medidas de leitura em `ch` foram retiradas dos blocos em 09/09/2026. Elas paravam o texto antes da borda do cartão que o contém, e o cartão parava antes da borda da página: três bordas direitas diferentes na mesma tela. Borda desalinhada é o que se nota; linha comprida, não. Ficam as larguras que são estrutura — a coluna da entrada, o modal das regras, o campo numérico —, e essas não são medida de leitura. */ /* ---------- a volta para o site, no alto da entrada ---------- Cartão só antes do login, onde a pessoa ainda não tem menu. Depois de entrar, o mesmo destino vira item de navegação (`.nav-site`), que é onde se procura por ele em qualquer tela. Fica na cor de ação, com a seta de link externo que o `2026.css` põe sozinho em `a[target="_blank"]`. */ .hub-site { margin: 1.25rem 0 0; } .hub-site a { display: block; padding: 0.8rem 1rem; background: var(--superficie); border-left: 3px solid var(--indigo-700); text-decoration: none; color: inherit; } .hub-site a:hover { background: var(--papel); border-left-color: var(--magenta-700); } .hub-site-t { display: block; font-weight: 800; color: var(--indigo-700); } .hub-site-d { display: block; margin-top: 0.15rem; font-size: var(--fs-sm); color: var(--cinza); line-height: 1.4; } /* A seta de link externo do `2026.css` é `::after` do , e os filhos daqui são blocos: ela caía sozinha numa terceira linha, como um degrau vazio no pé do cartão. Sai de lá e reaparece colada ao título, que é onde ela informa para onde se vai. */ /* `a[target="_blank"]:not(.a, .b, …)` conta como (0,2,1) — o `:not` soma a classe mais específica de dentro. Um `.hub-site a` é (0,1,1) e perde. Com o atributo repetido aqui, empata, e `plataforma.css` carrega depois. */ .hub-site a[target="_blank"]::after { content: none; } .hub-site-t::after { content: "\2197"; margin-left: 0.3em; font-size: 0.85em; display: inline-block; vertical-align: baseline; } /* ---------- o site no menu ---------- Último item, e separado dos três primeiros: Início, Meus envios e Perfil ficam aqui dentro; este sai. O espaço à esquerda diz isso sem precisar de régua nem de rótulo. A seta ↗ vem do `2026.css` pelo `a[target="_blank"]` — aqui os filhos não são blocos, então ela cai na linha do texto, que é onde deve estar. */ .plataforma-nav .nav-site { margin-left: 0.9rem; padding-left: 0.9rem; border-left: 1px solid var(--borda); } @media (max-width: 980px) { /* Recolhido, o menu empilha e a borda lateral vira um traço solto. */ .plataforma-nav .nav-site { margin-left: 0; padding-left: 0; border-left: 0; } } /* ---------- o vídeo do guia ---------- Antes do texto e à largura da coluna. Sem moldura, sem sombra: a imagem já é uma tela de computador com bordas próprias, e emoldurar tela dentro de tela vira caixa dentro de caixa. */ .guia-video { margin: 1.75rem 0 0; } .guia-video video { display: block; width: 100%; height: auto; background: var(--indigo-900); } .guia-video figcaption { margin-top: 0.6rem; font-size: var(--fs-sm); color: var(--cinza); line-height: 1.5; } /* A contagem em linha própria e discreta: informa sem virar placar. */ .guia-video-conta { display: block; margin-top: 0.2rem; color: var(--cinza-fraco); } /* O selo «com vídeo». Na forma das etiquetas que a casa já usa — a `.opcao-orgao` que carrega PROPPG e PROEXT: mono, miúda, espaçada, ao lado do título. O que muda é o preenchimento, e de propósito: aquelas classificam, esta oferece. Magenta cheio, e não índigo: o índigo é a cor do próprio link, e o selo precisa se destacar de dentro dele. `--papel` sobre `--magenta-700` dá 6,83:1. A especificidade é (0,2,0) para vencer `.entrada-guia > span`, e o seletor descendente existe por isso. */ .entrada-guia .selo-video { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.5rem; padding: 0.12rem 0.4rem; vertical-align: 0.12em; background: var(--magenta-700); color: var(--papel); font-family: var(--mono); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } /* No hover do cartão o selo inverte: o cartão clareia, e sem isto o magenta cheio ficava sozinho num fundo que mudou. */ .entrada-guia:hover .selo-video { background: var(--indigo-700); } /* A volta, no alto do guia. Antes do título e discreta: é saída, não destino, e no pé da página ninguém a encontraria — o guia tem onze seções. */ .guia-volta { margin: 0; font-size: var(--fs-sm); } .guia-volta a { color: var(--cinza); text-decoration: none; font-weight: 700; } .guia-volta a::before { content: "\2190"; margin-right: 0.35rem; } .guia-volta a:hover { color: var(--indigo-700); text-decoration: underline; } /* ---------- os dezoito objetivos no rodapé ---------- Ao lado de quem é a JIEPE, e não numa faixa abaixo: abaixo, em selo grande, eles viravam o assunto do rodapé. Nove colunas, e as fileiras saem inteiras: 18 é 9×2, 6×3 e 3×6, então só se usam divisores. Com `auto-fit` a última fileira ficaria pela metade em quase toda largura, e fileira quebrada num rodapé lê como erro de carregamento. A coluna do texto tem largura fixa e a dos selos fica com o resto: assim o selo encolhe conforme a janela, sem que a frase da JIEPE se aperte. */ .rodape-topo { display: grid; grid-template-columns: minmax(0, 26rem) 1fr; gap: 1.5rem 2.5rem; align-items: start; } .rodape-ods { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0.3rem; } .rodape-ods img { display: block; width: 100%; height: auto; aspect-ratio: 1; } /* Empilhado, o texto volta a mandar na largura e os selos crescem: seis colunas, que continua sendo divisor. */ @media (max-width: 860px) { .rodape-topo { grid-template-columns: 1fr; } .rodape-ods { grid-template-columns: repeat(6, 1fr); gap: 0.4rem; } } @media (max-width: 460px) { .rodape-ods { grid-template-columns: repeat(3, 1fr); } } /* ---------- as repartições do painel ---------- Linha com rótulo à esquerda e número à direita, e não cartão por valor: são listas curtas de comparação, e um cartão para cada uma viraria mosaico sem hierarquia. O filete entre linhas basta para separá-las. As colunas de número têm largura fixa, para que os algarismos fiquem uns sobre os outros — é o que permite comparar sem ler. */ .admin-quadro { margin-top: 0.9rem; } .admin-linha { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1.25rem; align-items: baseline; margin: 0; padding: 0.55rem 0; border-bottom: 1px solid var(--borda); } .admin-linha:first-child { border-top: 1px solid var(--borda); } .admin-linha-r { font-size: var(--fs-sm); } /* De onde vem o número, quando ele precisa se explicar: «o campo veio vazio» embaixo do rótulo, e não ao lado, para a coluna do número continuar reta. */ .admin-linha-sob { display: block; font-size: var(--fs-xs); color: var(--cinza); } /* Linha que leva a algum lugar tem de parecer que leva: como âncora sem desenho, o nome da área ficava idêntico ao texto ao lado e ninguém achava a casa dela. */ a.admin-linha-r { color: var(--indigo-700); font-weight: 700; text-decoration: none; } a.admin-linha-r:hover { text-decoration: underline; } .admin-linha-n { min-width: 4.5rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; } /* Quando há duas colunas de número, a linha ganha a terceira faixa. */ .admin-linha:has(.admin-linha-n + .admin-linha-n) { grid-template-columns: 1fr auto auto; } /* Quatro colunas de número (obrigatórios: enviaram, rascunho, faltam, de): mais estreitas, para o rótulo não sumir no celular. */ .admin-linha:has(.admin-linha-n + .admin-linha-n + .admin-linha-n + .admin-linha-n) { grid-template-columns: 1fr repeat(4, auto); column-gap: 0.75rem; } .admin-linha:has(.admin-linha-n + .admin-linha-n + .admin-linha-n + .admin-linha-n) .admin-linha-n { min-width: 3.25rem; } /* O cabeçalho não é dado: cinza, miúdo, e sem o peso dos números. */ .admin-linha--cabeca { border-bottom-color: transparent; padding-bottom: 0; } /* A área e os editais dela: o subtotal em cima, com peso, e as linhas do edital recuadas — é a hierarquia que o `config/obrigatoriedade.php` já tem. */ .admin-linha--area { border-bottom-color: transparent; padding-bottom: 0.2rem; margin-top: 0.6rem; } .admin-linha--area .admin-linha-r { font-weight: 800; } .admin-linha--sob .admin-linha-r { padding-left: 1rem; color: var(--cinza); } .admin-linha--sob .admin-linha-n { color: var(--cinza); font-weight: 400; } /* O ano dos editais, entre a área e as linhas de edital. */ .admin-linha--ano { border-bottom-color: transparent; padding-bottom: 0.1rem; } .admin-linha--ano .admin-linha-r { padding-left: 1rem; font-weight: 700; } .admin-linha--ano .admin-linha-n { font-weight: 600; } .admin-linha--sob-ano .admin-linha-r { padding-left: 2rem; } /* No painel o edital recuado é link, e o cinza de cima o fazia parecer texto. */ .admin-linha--sob a.admin-linha-r { color: var(--indigo-700); } .admin-linha--cabeca .admin-linha-n { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cinza); } /* O que se escreveu em «outro formato», embaixo do rótulo. */ .admin-outros { display: block; font-size: var(--fs-xs); color: var(--cinza); line-height: 1.4; margin-top: 0.15rem; } /* ---------- os dois gráficos do painel ---------- Barras em CSS: trinta valores, nenhuma interação, e nenhuma dependência nova. A altura vem de `--h`, calculada no servidor contra o maior valor da própria série — cada gráfico tem a sua escala, porque comparar entradas com envios em número absoluto não diria nada. */ /* Lado a lado, que é como se comparam. Cada dia fica com uns 17px, onde três algarismos não cabem — por isso só o pico traz número escrito, e o resto se lê na linha acima do gráfico, que muda com o cursor, o dedo ou o foco. */ .graficos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 0.9rem; } @media (max-width: 760px) { .graficos { grid-template-columns: 1fr; } } .grafico { border: 1px solid var(--borda); padding: 0.9rem 1rem 0.7rem; } .grafico-t { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin: 0 0 0.7rem; font-size: var(--fs-sm); font-weight: 700; } .grafico-t .num { font-size: 1.35rem; font-weight: 800; color: var(--indigo-700); } /* A linha de base é do gráfico, e não de cada barra: um traço por dia sem movimento some contra o papel, e trinta traços quase invisíveis não são chão nenhum. Com a base desenhada uma vez, o dia em zero é uma falha visível na linha — que é o que ele é. */ .grafico-barras { display: flex; align-items: flex-end; gap: 2px; height: 92px; border-bottom: 2px solid var(--borda); } /* A leitura: sempre no mesmo lugar, acima do gráfico. Altura fixa para o gráfico não pular quando o texto muda de tamanho. */ .grafico-leitura { margin: 0 0 0.4rem; min-height: 1.2rem; font-size: var(--fs-xs); font-weight: 700; color: var(--indigo-700); font-variant-numeric: tabular-nums; } /* Cada dia é um botão que ocupa a coluna: o número no alto, a barra embaixo. Sem borda, sem fundo e sem cursor de texto — quem clica está apontando, não acionando. */ .grafico-dia { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; position: relative; } .grafico-dia:hover .grafico-barra, .grafico-dia:focus-visible .grafico-barra { background: var(--magenta-700); } /* O foco desenha a coluna inteira, e não só a barra: numa barra de dois pixels o anel de foco ficaria fora da tela. */ .grafico-dia:focus-visible { outline: 2px solid var(--magenta-500); outline-offset: 1px; } .grafico-barra { width: 100%; height: var(--h); background: var(--indigo-700); border-radius: 1px 1px 0 0; } /* O número em cima da barra. Miúdo e tabular, e transborda a coluna quando precisa: com trinta dias cada uma tem uns 17px, e três algarismos não cabem dentro. Transbordar para o dia vizinho, que costuma ser mais baixo, é melhor do que cortar o número. */ /* O rótulo fica fora do fluxo, apoiado no topo da própria barra. Empilhado com ela, ele disputava os 92px da coluna: perto do máximo não cabiam os dois, e a barra do pico — a única rotulada — encolhia. Duas barras de mesmo valor saíam de alturas diferentes, e só perto do topo, que é onde ninguém procura a causa. */ .grafico-n { position: absolute; bottom: var(--h); left: 0; width: 100%; text-align: center; font-size: 0.58rem; font-weight: 700; line-height: 1.6; color: var(--cinza); white-space: nowrap; } /* Dia sem movimento não ganha rótulo nem barra: fica a falha na linha de base, que é o que ele é. */ .grafico-dia--zero .grafico-barra { height: 0; } .grafico-eixo { display: flex; justify-content: space-between; margin: 0.4rem 0 0; font-size: var(--fs-xs); color: var(--cinza-fraco); } /* Os resumos por ODS: as colunas do gráfico do movimento, cada uma na cor do selo. Mais alto que o do movimento, porque são dezoito colunas largas e o desenho do conjunto é o que se lê. O hover não troca a cor, como no movimento: aqui a cor é o objetivo, e trocá-la apagaria quem é quem. */ .grafico-ods { margin: 0.9rem 0 1rem; padding-top: 1.4rem; } .grafico-ods-barras { height: 160px; gap: 6px; } .grafico-ods-col .grafico-barra { background: var(--cor); } .grafico-ods-col:hover .grafico-barra, .grafico-ods-col:focus-visible .grafico-barra { background: var(--cor); opacity: 0.8; } .grafico-ods-col .grafico-n { font-size: var(--fs-xs); color: var(--tinta, inherit); } .grafico-ods-col.grafico-dia--zero .grafico-n { bottom: 0; color: var(--cinza-fraco); } .grafico-ods-eixo { display: flex; gap: 6px; margin: 0.35rem 0 0; } .grafico-ods-eixo span { flex: 1 1 0; min-width: 0; text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--cinza); } /* Os endereços do registro, num bloco próprio dentro da linha da lista. Quem confere e quem corrige é a mesma pessoa, no mesmo instante — mandá-la a outra tela para trocar um e-mail seria trocar um clique por três. Bloco separado porque a área editável precisa se distinguir do resto, que é leitura: solta entre os metadados, a caixa de texto parecia mais um deles. */ /* Aqui a linha da lista é uma coluna só, empilhada: pessoa, projeto, endereços. Um e-mail não cabe em metade da largura, e um título de projeto cortado no meio não serve para conferir contra o edital. `--larga` diz o mesmo para a lista de projetos, e é nome separado de propósito: em 20/09/2026 renomear o de baixo arrastou a casa do registro para dentro de uma reversão que não era dela. O seletor é um só porque a regra é uma só; os nomes ficam dois porque as telas são duas. */ .admin-lista--registro li, .admin-lista--larga li { grid-template-columns: 1fr; } /* E, na lista de projetos, o que vem depois do título desce. Ali a segunda linha é outra informação — quem coordena, de que edital —, e não um complemento do nome. Com a linha inteira sobra espaço à direita de um título curto, e a coordenação subia para o lado dele, emendada: «…com adolescentes em vulnerabilidade Ailton de Souza Aragao». Na casa do registro não: lá o título é o nome de uma pessoa, e o papel e o endereço ao lado dele são a mesma frase. */ .admin-lista--empilhada .admin-lista-email { flex: 0 0 100%; } .admin-contagem { margin: 0.9rem 0 0.2rem; font-size: var(--fs-sm); color: var(--cinza); font-variant-numeric: tabular-nums; } .registro-projeto { display: grid; gap: 0.1rem; margin-top: 0.25rem; } /* O aviso de endereço repetido. Cor de alerta e não de erro: não se sabe qual das linhas está errada, e quem lê é quem vai descobrir. */ .registro-alerta { margin: 0.4rem 0 0; padding: 0.5rem 0.7rem; border-left: 3px solid var(--alerta); background: color-mix(in srgb, var(--alerta) 8%, transparent); font-size: var(--fs-sm); line-height: 1.45; } .registro-nota { grid-column: 1 / -1; margin: 0.1rem 0 0; font-size: var(--fs-xs); color: var(--cinza); } .registro-nota--solta { margin-top: 0.3rem; } /* Bolsista ou coordenação: numa busca por nome comum os dois saem lado a lado, e sem o rótulo não se sabe qual é qual até ler o projeto. */ .registro-papel { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--indigo-700); border: 1px solid var(--borda); padding: 0.05rem 0.35rem; } .registro-projeto-titulo { font-size: var(--fs-sm); color: var(--tinta); } .registro-enderecos { grid-column: 1 / -1; margin-top: 0.5rem; padding: 0.6rem 0.75rem; background: var(--papel); border: 1px solid var(--borda); display: grid; gap: 0.35rem; } .registro-linha { display: grid; grid-template-columns: 7rem 1fr auto; align-items: center; gap: 0.5rem; margin: 0; } .registro-rotulo { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cinza); } .registro-valor { font-family: var(--mono); font-size: var(--fs-sm); } /* O campo ocupa a coluna do valor, para os dois endereços ficarem alinhados um sobre o outro — é a comparação que se faz aqui. */ .registro-linha--conserto input { font-family: var(--mono); font-size: var(--fs-sm); padding: 0.35rem 0.5rem; width: 100%; margin: 0; } .btn-mini { padding: 0.35rem 0.7rem; font-size: var(--fs-xs); } .registro-historico { grid-column: 1 / -1; margin: 0.15rem 0 0; font-size: var(--fs-xs); color: var(--cinza-fraco); font-variant-numeric: tabular-nums; } @media (max-width: 620px) { .registro-linha { grid-template-columns: 1fr; } } /* A equipe de cada frente (`/painel/equipe`). Uma frente por bloco, e dentro dela os quatro papéis lado a lado: a pergunta aqui é «quem está em quê?», e numa lista corrida seria preciso ler todos os nomes para responder. Prefixo `equipe-`: `.papel`, `.pessoa` e `.frente` são genéricos demais para a folha do site, que carrega junto. */ .equipe-frente { margin-top: 2rem; scroll-margin-top: 1rem; } .equipe-frente-t { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.015em; padding-bottom: 0.4rem; border-bottom: 2px solid var(--indigo-700); } .equipe-frente-n { font-size: var(--fs-xs); font-weight: 700; color: var(--cinza); } .equipe-papeis { display: grid; gap: 0.6rem; margin-top: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .equipe-papel { border: 1px solid var(--borda); background: var(--papel); padding: 0.7rem 0.85rem; min-width: 0; } .equipe-papel-t { margin: 0 0 0.45rem; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cinza); } .equipe-vazio { margin: 0; font-size: var(--fs-xs); color: var(--cinza-fraco); } .equipe-pessoas { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; } .equipe-pessoa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; min-width: 0; } .equipe-pessoa-nome { font-size: var(--fs-sm); font-weight: 700; } .equipe-pessoa-email { flex-basis: 100%; font-size: var(--fs-xs); color: var(--cinza); overflow-wrap: anywhere; } .equipe-pessoa-tirar { margin-left: auto; } .equipe-chamar { margin-top: 0.6rem; } .equipe-form { padding: 0.95rem 1.1rem 1.2rem; } .equipe-form input[type="email"], .equipe-form select { width: 100%; } /* O preenchimento na lista de rascunhos, no lugar da coluna do revisor: a porcentagem e os cinco passos numa linha, as palavras embaixo. Os passos são quadrados, como a régua do site. */ .admin-tabela-d.rascunho-preenchido { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.45rem; white-space: normal; } .rascunho-pct { font-weight: 700; color: var(--tinta); min-width: 2.4rem; } .rascunho-passos { display: inline-flex; gap: 3px; } .rascunho-passo { width: 0.55rem; height: 0.55rem; border: 1px solid var(--cinza-fraco); } .rascunho-passo--pronto { background: var(--indigo-700); border-color: var(--indigo-700); } /* Na fonte do texto, que é mais estreita: na monoespaçada, «242/300 palavras» não cabia na coluna e quebrava em duas linhas. */ .rascunho-palavras { flex-basis: 100%; font-family: var(--sans); font-variant-numeric: tabular-nums; } /* No estreito, o preenchimento ganha uma faixa própria, embaixo dos metadados: no lugar do revisor ele dividia a linha com o nome de quem assina, e um nome longo o espremia até sumir. */ @media (max-width: 899px) { .admin-tabela--resumos .admin-tabela-revisor.rascunho-preenchido { grid-area: 4 / 1 / 5 / 5; } .rascunho-palavras { flex-basis: auto; } } /* ---------- a inscrição de parecerista ---------- As dezoito ODS como escolha de várias: no largo, três colunas, porque dezoito linhas empilhadas viram rolagem sem comparação; no estreito, uma. A caixa de «qualquer ODS» fica solta acima, com o peso de quem responde a pergunta inteira. */ /* ⚠️ `display: flex` repetido com `.form-resumo` na frente, e é necessário: `.form-resumo label` declara `display: block` e vence `.opcao` por especificidade. Sem isto, a fita — que é `flex` — virava bloco e caía para a linha de baixo. Fica no escopo desta tela para não mexer nas opções do formulário do autor, que convivem com o `block` desde sempre. */ .form-resumo .parecerista-todas, .form-resumo .parecerista-ods .opcao { display: flex; align-items: center; } .parecerista-todas { margin-top: 0.9rem !important; font-weight: 700; align-items: center; } /* A frase empurra a fita para a direita: com `margin-left: auto` e a caixa podendo quebrar, a fita caía para a linha de baixo. */ .parecerista-todas > span:not(.parecerista-fita) { flex: 1; min-width: 0; } /* No estreito a fita sai: é decoração, e roubava largura da frase, que saía em quatro linhas. */ .parecerista-fita { display: none; flex: none; } .parecerista-fita i { width: 0.5rem; height: 1rem; background: var(--cor); } .parecerista-ods { display: grid; gap: 0.4rem; margin-top: 0.6rem; } /* O selo oficial, e a cor do objetivo na borda — é o desenho que o formulário do autor já usa para o mesmo dado (`.ods-item`). */ .parecerista-ods .opcao { align-items: center; gap: 0.55rem; border-left: 4px solid var(--cor); } .parecerista-ods img { width: 2.4rem; height: 2.4rem; flex: none; } .parecerista-ods-t { font-size: var(--fs-sm); line-height: 1.3; font-weight: 700; } .parecerista-ods-t .num { font-weight: 800; color: var(--cinza); } /* Acinzentada enquanto «qualquer ODS» está marcada: a lista continua ali, mas dizer o contrário dela seria dar duas respostas à mesma pergunta. */ .parecerista-ods[data-desligada] { opacity: 0.45; } @media (min-width: 720px) { .parecerista-ods { grid-template-columns: repeat(2, minmax(0, 1fr)); } .parecerista-fita { display: flex; } } @media (min-width: 1000px) { .parecerista-ods { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* As inscrições de parecerista esperando resposta, na tela da equipe. Uma por bloco, com o que a pessoa declarou e as duas respostas lado a lado — e não numa tabela: o que se lê aqui é um caso por vez, e não uma coluna comparada. */ .equipe-inscricoes { margin-top: 1.25rem; } .equipe-inscricao { display: grid; gap: 0.3rem; padding: 0.8rem 0; border-top: 1px solid var(--borda); } .equipe-inscricao-quem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem; margin: 0; } .equipe-inscricao-d, .equipe-inscricao-ods { margin: 0; font-size: var(--fs-sm); color: var(--cinza); } .equipe-inscricao-ods strong { color: var(--tinta); } .equipe-inscricao-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: 0.35rem; } .equipe-inscricao-recusa { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .equipe-inscricao-recusa input { font: inherit; font-size: var(--fs-sm); padding: 0.35rem 0.5rem; border: 1px solid var(--borda); background: var(--papel); min-width: 12rem; } /* A caixa de colar da lista de área, e a conferência do que ela entendeu. * * `admin-` porque é prefixo seguro: `lista`, `colar` e `previa` já existem — * `.previa` é o bloco dobrável do resumo publicado, e reusá-lo aqui traria a * estilização de `summary` junto. */ .admin-colar { display: grid; gap: 0.3rem; margin: 0.75rem 0 1.5rem; } .admin-colar label { font-size: var(--fs-sm); font-weight: 700; margin-top: 0.5rem; } .admin-colar textarea, .admin-colar input { font: inherit; width: 100%; padding: 0.6rem 0.75rem; line-height: 1.5; border: 1px solid var(--borda); background: var(--papel); } .admin-colar textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-sm); resize: vertical; } .admin-colar .acoes-secundarias { margin-top: 0.75rem; } /* O campo que recebe uma frase, e não uma lista colada. A fonte de máquina de escrever é o que faz a caixa de colar parecer uma caixa de colar; num título de projeto ela só o faz parecer código. */ .admin-colar--prosa textarea { font-family: inherit; font-size: inherit; } .admin-previa { border: 1px solid var(--borda); background: var(--superficie); padding: 0.9rem 1.1rem; margin: 0 0 1.5rem; } .admin-previa .admin-lista li { background: var(--papel); } /* O convite da lista: números e dois botões de peso diferente. O de mandar para a lista é o primário, e leva o número dentro — «Convidar 44 pessoas» é uma decisão, «Convidar» é um clique. O da amostra fica ao lado, neutro, porque é o que se faz antes. */ .admin-convite-t { margin: 0 0 0.35rem; font-weight: 800; } .admin-convite-n { margin: 0 0 0.5rem; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .admin-convite-acoes { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.9rem; } /* A ficha de ouvinte: o que já inscreve a pessoa, uma linha por item. */ .ouvinte-participa { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 0.35rem; } /* O nível da ficha de ouvinte só aparece para quem marcou «discente». */ .ouvinte-nivel { display: none; } .form-resumo:has(input[name="bond"][value="discente"]:checked) .ouvinte-nivel { display: grid; } /* ------------------------------------------------------------------ pôster O pôster preenchido, na página do trabalho aprovado (partials/poster-baixar). A prévia ao lado do resumo do que vem pronto, e um cartão por ferramenta: a pergunta de quem chega é «onde eu abro isto». */ .poster { margin-block: 2rem 2.5rem; } .poster-cabeca { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1.5rem 2rem; align-items: start; margin-top: 0.75rem; } .poster-previa { display: block; text-decoration: none; color: var(--indigo-700); } .poster-previa img { display: block; width: 100%; height: auto; border: 1px solid var(--borda); box-shadow: 0 1px 3px rgba(18, 18, 43, 0.08); } .poster-previa span { display: block; margin-top: 0.5rem; font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; } .poster-previa:hover img { border-color: var(--indigo-700); } .poster-resumo p { margin: 0 0 0.75rem; line-height: 1.55; } .poster-formato { display: inline-block; padding: 0.3rem 0.7rem; background: var(--superficie); border: 1px solid var(--borda); font-size: var(--fs-sm); } .poster-sub { font-size: 1.05rem; font-weight: 800; margin: 2rem 0 0.75rem; } .poster-ferramentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; } .poster-ferramenta { display: flex; flex-direction: column; padding: 1.1rem 1.2rem; background: var(--papel); border: 1px solid var(--borda); } .poster-ferramenta h4 { margin: 0; font-size: 1rem; font-weight: 800; } .poster-para { margin: 0.25rem 0 0.75rem; color: var(--cinza); font-size: var(--fs-sm); line-height: 1.45; } .poster-ferramenta ol { margin: 0 0 1rem; padding-left: 1.2rem; font-size: var(--fs-sm); line-height: 1.5; } .poster-ferramenta li + li { margin-top: 0.3rem; } .poster-ferramenta .btn { margin-top: auto; align-self: flex-start; } .poster-conferir { margin: 0; padding-left: 1.2rem; line-height: 1.55; } .poster-conferir li + li { margin-top: 0.4rem; } .poster .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 720px) { .poster-cabeca { grid-template-columns: minmax(0, 1fr); } } .poster-passos { list-style: none; margin: 2rem 0 0; padding: 0; } .poster-passos > li { padding-top: 0.5rem; border-top: 1px solid var(--borda); margin-top: 2rem; } .poster-passos > li > p { max-width: 46rem; line-height: 1.55; } .poster-n { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-right: 0.4rem; background: var(--indigo-700); color: #fff; font-size: 0.95rem; border-radius: 50%; } .poster-ferramenta h3 { margin: 0; font-size: 1rem; font-weight: 800; } .poster-passos .poster-conferir { margin-top: 1.25rem; } .poster-aviso { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; margin: 1.25rem 0; padding: 1rem 1.2rem; background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--ok); } .poster-aviso p { margin: 0; } .ligacao--futura { cursor: default; color: var(--cinza); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; } .ligacao--futura:hover { color: var(--cinza); } .poster-bloco-t { font-size: 1rem; font-weight: 800; margin: 1.1rem 0 0.4rem; } .poster-lista { margin: 0; padding-left: 1.2rem; line-height: 1.55; } .poster-lista li + li { margin-top: 0.3rem; } .poster-nota { margin-top: 1rem; padding: 0.7rem 0.9rem; background: var(--superficie); border-left: 3px solid var(--indigo-700); font-size: var(--fs-sm); } .poster-sua-previa { margin: 0.75rem 0 1.25rem; padding: 1rem 1.2rem; background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--indigo-700); } .poster-sua-previa p { margin: 0 0 0.75rem; } .poster-sua-previa .poster-sua-previa-aviso { margin: 0.75rem 0 0; font-size: var(--fs-sm); color: var(--cinza); } .poster-sua-previa .poster-transborda { margin: 0.75rem 0 0; padding: 0.6rem 0.8rem; background: var(--papel); border-left: 3px solid var(--alerta); font-size: var(--fs-sm); } /* O número da letra em cada ferramenta: tabela curta, para comparar de relance. */ .poster-tamanhos { border-collapse: collapse; margin: 0.6rem 0; font-size: var(--fs-sm); } .poster-tamanhos caption { text-align: left; font-weight: 700; padding-bottom: 0.3rem; } .poster-tamanhos th, .poster-tamanhos td { padding: 0.35rem 1.2rem 0.35rem 0; border-bottom: 1px solid var(--borda); text-align: left; font-weight: 400; } .poster-tamanhos thead th { font-size: var(--fs-xs); color: var(--cinza); text-transform: uppercase; letter-spacing: 0.04em; } .poster-tamanhos td { font-variant-numeric: tabular-nums; font-weight: 700; } .poster-dica { margin: 0 0 0.4rem; color: var(--cinza); font-size: var(--fs-sm); } .poster-instrucoes-t { font-size: 1.35rem; font-weight: 800; margin: 2rem 0 0.2rem; } .poster-instrucoes-d { margin: 0 0 0.5rem; color: var(--cinza); } /* ---------- obrigatórios por coordenação ---------- Cada docente é um bloco, com uma linha para cada pessoa que ainda não enviou. Quem já enviou não entra: a lista é de quem acompanhar. */ .coord { margin-top: 1.4rem; } .coord-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem; margin: 0 0 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--borda); } .coord-t strong { font-size: 1.05rem; } .coord-email { font-size: var(--fs-xs); color: var(--cinza); } .coord-conta { margin-left: auto; font-size: var(--fs-xs); font-weight: 700; color: var(--magenta-700); } .coord-b-d { font-size: var(--fs-xs); color: var(--cinza); overflow-wrap: anywhere; } .coord-sem-bolsista { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--magenta-700); } /* O envio que o nome sugere, por outro e-mail: pista, no mesmo tom de alerta. */ .coord-pista { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--magenta-700); } /* Uma linha por pessoa que falta: quem, em que pé está, e de onde vem a obrigação. No estreito, empilha. */ .coord-pendentes { list-style: none; margin: 0; padding: 0; display: grid; } .coord-pendentes li { display: grid; gap: 0.3rem 1rem; padding: 0.55rem 0; border-top: 1px dashed var(--borda); font-size: var(--fs-sm); } .coord-pendentes li:first-child { border-top: 0; } .coord-p-quem, .coord-p-proj { display: flex; flex-direction: column; min-width: 0; } .coord-p-onde { display: grid; gap: 0.35rem; min-width: 0; } .coord-p-estado { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; } @media (min-width: 760px) { .coord-pendentes li { grid-template-columns: minmax(0, 1.2fr) 9.5rem minmax(0, 2fr); align-items: start; } } /* A área abre cada parte da lista por coordenação: um título forte com faixa, porque é ele que separa o que a PROEXT olha do que a PROPPG olha. */ .coord-area { margin: 2.2rem 0 0.3rem; padding: 0.5rem 0.8rem; background: var(--indigo-700); color: #fff; font-size: 1.05rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem; align-items: baseline; } .coord-area span { font-size: var(--fs-xs); font-weight: 600; opacity: 0.9; } /* O aviso de texto repetido na revisão: a lista dos outros envios, com o motivo em destaque — é ele que diz se é o mesmo trabalho ou só o título. */ .repetidos ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.45rem; } .repetidos li { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; align-items: baseline; } .repetidos-motivo { font-size: var(--fs-xs); font-weight: 800; color: var(--magenta-700); } .repetidos-d { flex-basis: 100%; font-size: var(--fs-xs); color: var(--cinza); } /* Corrigir um bolsista, na tela do projeto. Fechado, é um botão pequeno na ponta da linha; aberto, o formulário ocupa a linha inteira do cartão, sem caixa própria: a `.previa` aqui dentro lia como um cartão dentro do outro. */ .bolsista-corrigir { display: grid; gap: 0.75rem; justify-self: start; } @media (min-width: 760px) { .bolsista-corrigir { grid-column: -2; justify-self: end; } } .bolsista-corrigir > summary { list-style: none; cursor: pointer; justify-self: end; } .bolsista-corrigir > summary::-webkit-details-marker { display: none; } .bolsista-corrigir[open] { grid-column: 1 / -1; justify-self: stretch; } .bolsista-corrigir-form { display: grid; gap: 0.6rem 1rem; padding-top: 0.75rem; border-top: 1px solid var(--borda); } @media (min-width: 760px) { .bolsista-corrigir-form { grid-template-columns: 1fr 1fr; } } .bolsista-corrigir-form label { display: grid; gap: 0.25rem; font-size: var(--fs-sm); font-weight: 700; } .bolsista-corrigir-form input { font: inherit; font-weight: 400; width: 100%; padding: 0.5rem 0.7rem; border: 1px solid var(--borda); background: var(--papel); } .bolsista-corrigir-largo { grid-column: 1 / -1; margin: 0; } .bolsista-corrigir-pe { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; } /* Resumos por ODS: a porcentagem é o número da linha; a contagem, entre parênteses, fica ao lado e mais apagada. */ .ods-conta-qtd { font-weight: 400; color: var(--cinza); font-size: var(--fs-xs); } .ods-conta .admin-linha-n { white-space: nowrap; } /* ---------- impressão ---------- Quem imprime a tela (ou salva em PDF) quer o conteúdo dela. A barra do menu é `sticky` e, no papel, ficava parada por cima do título; o balão do WhatsApp é `fixed` e se repetia em todas as páginas. Saem os dois, com o resto do que só serve na tela: menu do painel, voltar, rodapé, botões e os blocos de desfazer e devolver. */ /* Resumos por curso: seis colunas de número não cabem na .admin-linha, que quebrava cada curso em duas linhas. Tabela de verdade, que também imprime inteira; no celular, rola de lado em vez de espremer o nome do curso. */ .cursos-rolagem { margin-top: 0.9rem; overflow-x: auto; } .cursos-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .cursos-tabela th, .cursos-tabela td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: baseline; } .cursos-tabela th:first-child, .cursos-tabela td:first-child { padding-left: 0; } .cursos-tabela th:last-child, .cursos-tabela td:last-child { padding-right: 0; } .cursos-tabela tbody th { font-weight: 400; } .cursos-tabela thead th { font-size: var(--fs-xs); color: var(--cinza); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-top: 1px solid var(--borda); } .cursos-tabela .cursos-n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .cursos-tabela .cursos-total { font-weight: 700; } .cursos-tabela tfoot th, .cursos-tabela tfoot td { font-weight: 700; border-top: 2px solid var(--tinta); } .cursos-abre { color: var(--indigo-700); text-decoration: none; } .cursos-abre:hover { text-decoration: underline; } .cursos-tabela .cursos-codigo, .cursos-tabela .cursos-situacao { white-space: nowrap; } /* «noturno» diz quem disputa as vagas da noite; «pelo nome», que o curso é triagem e não registro. */ .cursos-marca, .cursos-pelo-nome { display: inline-block; margin-left: 0.4rem; padding: 0 0.45rem; border-radius: 99px; font-size: var(--fs-xs); white-space: nowrap; } .cursos-marca { border: 1px solid var(--indigo-700); color: var(--indigo-700); } .cursos-pelo-nome { border: 1px dashed var(--cinza); color: var(--cinza); } /* Juntar cadastros: os dois lado a lado, cada um com o que carrega, para escolher qual fica vendo o que vai junto. */ .juntar-de { margin: 1rem 0 0.4rem; } .juntar-escolha { border: 0; padding: 0; margin: 1rem 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } .juntar-escolha legend { font-weight: 700; margin-bottom: 0.6rem; } .juntar-opcao small { display: block; color: var(--cinza); } /* «entrar como» numa linha só: quebrado, cada pessoa ocupava duas linhas. */ .admin-tabela--pessoas .admin-tabela-acao { display: flex; gap: 0.8rem; align-items: baseline; white-space: nowrap; } .juntar-lista { display: grid; gap: 0.15rem; margin-top: 0.6rem; font-size: var(--fs-sm); } /* Atividades formativas por campus: quem compra lê os recursos e liga para quem propôs. A tabela é a dos cursos; aqui só o que ela não tem. */ .af-relatorio-marca { display: inline-flex; gap: 0.4rem; align-items: center; font-size: var(--fs-sm); } .af-relatorio-tabela th, .af-relatorio-tabela td { vertical-align: top; } .af-relatorio-tabela tbody th { min-width: 16rem; } .af-relatorio-sob { display: block; color: var(--cinza); font-size: var(--fs-xs); font-weight: 400; } .af-relatorio-tel { display: block; white-space: nowrap; font-weight: 700; margin-top: 0.2rem; } .af-relatorio-zap { font-weight: 400; font-size: var(--fs-xs); margin-left: 0.3rem; } .af-relatorio-lista { margin: 0; padding-left: 1.1rem; } .af-relatorio-texto { white-space: pre-line; max-width: 22rem; } /* A triagem da compra: o estado em texto, que é o que sai no papel, e os três botões, com o escolhido preenchido. */ .af-compra { min-width: 9rem; } .af-compra-estado { display: block; font-size: var(--fs-sm); font-weight: 700; } .af-compra-estado--sim { color: var(--magenta-700); } .af-compra-estado--almoxarifado { color: var(--indigo-700); } .af-compra-estado--pendente { color: var(--cinza); font-weight: 400; } .af-compra-botoes { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.4rem; } .af-compra-botoes .btn { padding: 0.3rem 0.8rem; } .af-materiais-campus { font-size: var(--fs-sm); margin: 1.2rem 0 0.4rem; } .af-materiais-retirados { margin-top: 0.6rem; } .af-materiais-retirados ul { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: var(--fs-sm); color: var(--cinza); } .af-materiais-retirados li form { display: inline; margin-left: 0.4rem; } .af-compra-botoes .btn[aria-pressed="true"] { background: var(--indigo-700); border-color: var(--indigo-700); color: #fff; } @media print { .af-relatorio-filtros, .af-relatorio-zap { display: none; } /* Cada campus começa numa folha: é o papel que vai para quem cuida dele. */ .af-relatorio-campus ~ .af-relatorio-campus { break-before: page; } /* A lista da compra e a do almoxarifado vão para equipes diferentes. */ .af-materiais-lista ~ .af-materiais-lista { break-before: page; } } @media print { .cursos-abre { color: inherit; } } @media print { .pular, .topo-inst, .navbar, .imitando, .admin-menu, .admin-menu-abre, .admin-voltar, .ajuda-balao, .rodape, .admin-desfazer, .admin-devolver, button, .btn { display: none !important; } body, .admin { background: #fff !important; } .wrap { max-width: none; padding-inline: 0; } /* Ninguém clica no papel: o resumo na formatação de publicação só existe aberto, e um bloco não se parte entre duas páginas quando cabe numa. */ details:not([open]) { display: none; } .trabalho-cabeca, .form-bloco, li { break-inside: avoid; } textarea { border: 1px solid #ccc; min-height: 0; height: auto; overflow: visible; } .cursos-rolagem { overflow: visible; } .cursos-tabela tr { break-inside: avoid; } } /* Noturno à mão: três botões, o atual preenchido. */ .cursos-tabela .cursos-noturno { white-space: nowrap; } .cursos-noturno form { display: inline-flex; gap: 0.25rem; } .cursos-escolha { font: inherit; font-size: var(--fs-xs); padding: 0.1rem 0.5rem; border-radius: 99px; border: 1px solid var(--borda); background: none; color: var(--tinta); cursor: pointer; } .cursos-escolha:hover { border-color: var(--indigo-700); } .cursos-escolha-atual { background: var(--indigo-700); border-color: var(--indigo-700); color: #fff; } /* O número da noite em Uberaba, que decide as vagas da noite. */ .cursos-noite { display: flex; gap: 1rem; align-items: center; margin: 1rem 0 0.4rem; padding: 0.8rem 1rem; border: 1px solid var(--borda); border-left: 3px solid var(--indigo-700); } .cursos-noite-n { margin: 0; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--indigo-700); font-variant-numeric: tabular-nums; } .cursos-noite p { margin: 0; } .cursos-lista-cnpq { margin-top: 0.4rem; } .cursos-lista-cnpq summary { cursor: pointer; color: var(--indigo-700); font-size: var(--fs-sm); } /* O agendamento da apresentação (26 a 30/10/2026): o PDF, a imagem e a sessão. A grade de horários é compacta: em Uberaba são 62 sessões. */ .agenda-intro { margin: 1rem 0 0; font-size: var(--fs-sm); line-height: 1.55; max-width: 70ch; } .agenda-passos { margin-top: 1.5rem; } .agenda-marcada-quando { font-size: 1.05rem; margin: 0.3rem 0; } /* O horário à esquerda, quem apresenta à direita, com o ícone do envio. */ .agenda-marcada { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; } .agenda-marcada-quem { display: flex; gap: 0.7rem; align-items: center; color: var(--magenta-700); } .agenda-marcada-quem p { margin: 0; color: var(--tinta); } .agenda-marcada-quem small { display: block; font-size: var(--fs-xs); color: var(--cinza); } .agenda-envio { display: grid; gap: 0.5rem; justify-items: start; } .agenda-envio input[type="file"] { font: inherit; font-size: var(--fs-sm); max-width: 100%; color: var(--cinza); padding: 0.6rem; border: 2px dashed var(--borda); background: var(--papel); cursor: pointer; } .agenda-envio input[type="file"]:hover { border-color: var(--indigo-700); } /* O botão do navegador, cinza e de outro sistema, vestido como os da página. */ .agenda-envio input[type="file"]::file-selector-button { font: inherit; font-weight: 800; margin-right: 0.8rem; padding: 0.55rem 1rem; border: 2px solid var(--indigo-700); background: transparent; color: var(--indigo-700); cursor: pointer; } .agenda-envio input[type="file"]::file-selector-button:hover { background: var(--indigo-700); color: #fff; } /* O aviso do celular, no passo do PDF: em magenta, com o ícone de alerta. */ .agenda-celular { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0.75rem 0 1rem; padding: 0.75rem 1rem; border-left: 3px solid var(--magenta-700); background: #fdf0f7; color: var(--magenta-700); max-width: 52rem; } .agenda-celular svg { flex: none; margin-top: 0.1rem; } .agenda-celular p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--magenta-700); } .agenda-celular strong { color: var(--magenta-700); } .agenda-imagem { display: block; margin-top: 0.75rem; border: 1px solid var(--borda); background: #fff; } .agenda-imagem img { display: block; width: 100%; height: auto; } .agenda-imagem--iturama { max-width: 30rem; } .agenda-turno { border: 0; padding: 0; margin: 1.25rem 0 0; } .agenda-turno legend { font-size: var(--fs-sm); font-weight: 800; padding: 0; margin-bottom: 0.5rem; } .agenda-grade { display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } .agenda-opcao { display: grid !important; grid-template-columns: auto 1fr; gap: 0 0.45rem; align-items: center; margin: 0 !important; padding: 0.45rem 0.6rem; border: 1px solid var(--borda); background: var(--papel); cursor: pointer; font-weight: 400 !important; } .agenda-opcao:has(input:checked) { border-color: var(--indigo-700); background: var(--superficie); } .agenda-opcao input { margin: 0; } .agenda-hora { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .agenda-opcao small { grid-column: 2; font-size: var(--fs-xs); color: var(--cinza); } .agenda-opcao--cheia { opacity: 0.5; cursor: not-allowed; } .agenda-confirmar { margin-top: 1.25rem; } .agenda-desistir { margin-top: 1rem; } /* Os campos de quem não assina só aparecem com «Outra pessoa» marcada. */ .agenda-fora { display: none; margin-top: 0.8rem; } .agenda-apresentador:has(input[value="outside"]:checked) .agenda-fora { display: block; } /* O agendamento no painel: a conta da noite, a ocupação e a programação. */ .agenda-dia { font-size: var(--fs-sm); font-weight: 800; margin: 1.25rem 0 0.35rem; } .agenda-marca { font-size: var(--fs-xs); font-weight: 700; color: var(--cinza); border: 1px solid var(--borda); padding: 0 0.35rem; margin-left: 0.3rem; white-space: nowrap; } .agenda-conta { max-width: 46rem; } .agenda-busca { margin: 1rem 0; max-width: 42rem; } /* Os horários das atividades formativas: conferência, grade e edição. */ .horarios-conferir select { font: inherit; font-size: var(--fs-xs); max-width: 26rem; } .horarios-quando { white-space: nowrap; font-variant-numeric: tabular-nums; } .horarios-duvida td { background: color-mix(in srgb, var(--alerta) 8%, transparent); } .horarios-sem td { background: color-mix(in srgb, var(--cinza) 7%, transparent); color: var(--cinza); } .horarios-sem td:not(:first-child) { opacity: 0.6; } .horarios-etiqueta { display: inline-block; font-size: var(--fs-xs); font-weight: 800; padding: 0.2rem 0.5rem; white-space: nowrap; } .horarios-etiqueta--vai { background: var(--ok); color: #fff; } .horarios-etiqueta--fica { background: var(--borda); color: var(--cinza); display: none; } .horarios-sem .horarios-etiqueta--vai { display: none; } .horarios-sem .horarios-etiqueta--fica { display: inline-block; } .horarios-placar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0 1.2rem; } .horarios-placar span { padding: 0.5rem 0.9rem; font-size: var(--fs-sm); } .horarios-placar b { font-size: 1.3rem; margin-right: 0.3rem; } .horarios-vai { background: color-mix(in srgb, var(--ok) 14%, var(--papel)); color: var(--ok); } .horarios-fica { background: var(--superficie); color: var(--cinza); } .horarios-repetidas-grupo { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; gap: 0.5rem; } .horarios-repetidas-grupo li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0.8rem; background: var(--papel); border: 1px solid var(--borda); } .horarios-marca { font-weight: 700; } .horarios-choque td { background: color-mix(in srgb, var(--magenta-700) 9%, transparent); } .horarios-encontro { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; border: 1px solid var(--borda); padding: 0.6rem 0.9rem 0.9rem; margin-top: 0.7rem; } .horarios-encontro legend { font-size: var(--fs-sm); font-weight: 800; padding: 0 0.3rem; } .horarios-encontro label { display: grid; gap: 0.2rem; margin: 0; font-size: var(--fs-sm); } .horarios-local { flex: 1 1 14rem; } .horarios-sem-lista { padding-left: 1.1rem; display: grid; gap: 0.35rem; } .workshop-horario { margin: 1.2rem 0; } /* A grade das atividades formativas: dias em colunas, turnos em linhas, cada encontro um cartão com a cor do primeiro ODS. */ .afg-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; } .afg-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; } .afg-numeros { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); background: var(--borda); border: 1px solid var(--borda); } .afg-numeros li { background: var(--papel); padding: 0.8rem 1rem; display: grid; gap: 0.1rem; } .afg-numeros b { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .afg-numeros span { font-size: var(--fs-xs); color: var(--cinza); } .afg-numero--alerta b { color: var(--magenta-700); } .afg-rolagem { overflow-x: auto; margin-top: 1rem; } .afg-grade { display: grid; grid-template-columns: 4.5rem repeat(var(--dias), minmax(13rem, 1fr)); gap: 0.5rem; min-width: calc(4.5rem + var(--dias) * 13.5rem); } .afg-canto { } .afg-dia { position: sticky; top: 0; z-index: 1; background: var(--indigo-700); color: #fff; padding: 0.7rem 0.9rem; display: grid; } .afg-dia b { font-size: 1.05rem; font-weight: 800; } .afg-dia span { font-size: var(--fs-xs); opacity: 0.85; } .afg-turno { display: flex; align-items: flex-start; padding-top: 0.6rem; } .afg-turno span { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta-700); } .afg-celula { display: grid; gap: 0.45rem; align-content: start; padding: 0.45rem; background: var(--superficie); min-height: 3rem; border-top: 2px solid var(--borda); } .afg-cartao { position: relative; background: var(--papel); border: 1px solid var(--borda); border-left: 5px solid var(--ods); padding: 0.6rem 0.7rem 0.55rem; display: grid; gap: 0.25rem; } .afg-cartao:hover { border-color: var(--indigo-700); border-left-color: var(--ods); } .afg-cartao--choque { outline: 2px solid var(--magenta-700); outline-offset: -1px; } .afg-hora { margin: 0; font-size: var(--fs-xs); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--indigo-700); display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .afg-titulo { margin: 0; font-size: var(--fs-sm); line-height: 1.3; font-weight: 800; } .afg-titulo a { color: var(--tinta); text-decoration: none; } .afg-titulo a:hover { text-decoration: underline; } .afg-quem { margin: 0; font-size: var(--fs-xs); color: var(--cinza); } .afg-chips { margin: 0.15rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem; } .afg-chip { font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.45rem; background: var(--superficie); border: 1px solid var(--borda); color: var(--cinza); } .afg-chip--parte { background: var(--indigo-700); border-color: var(--indigo-700); color: #fff; } .afg-chip--choque { background: var(--magenta-700); border-color: var(--magenta-700); color: #fff; } .afg-editar { position: absolute; top: 0.5rem; right: 0.6rem; font-size: var(--fs-xs); } .afg-cartao { scroll-margin: 1rem; } a.afg-chip { text-decoration: none; } a.afg-chip:hover, a.afg-chip:focus-visible { border-color: var(--indigo-700); color: var(--indigo-700); } a.afg-chip--choque:hover, a.afg-chip--choque:focus-visible { color: #fff; } /* Editar sem sair da grade */ .afg-janela { width: min(50rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 1.3rem 1.4rem; background: var(--papel); color: var(--tinta); border: 1px solid var(--borda); overflow-y: auto; } .afg-janela::backdrop { background: rgb(18 18 43 / 0.45); } .afg-janela-t { margin: 0 0 0.2rem; font-size: 1.1rem; line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; } .afg-janela .campo-nota { margin: 0; } .afg-janela:focus { outline: none; } .afg-janela input { max-width: 100%; } .afg-janela select, .afg-janela textarea, .afg-janela input:not([type="checkbox"], [type="hidden"]) { box-sizing: border-box; padding: 0.5rem 0.65rem; font: inherit; font-weight: 400; color: var(--tinta); background: var(--papel); border: 1px solid var(--borda); } .afg-janela select { width: 100%; } .afg-janela select:focus-visible, .afg-janela textarea:focus-visible, .afg-janela input:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 0; } .afg-janela-ods { display: grid; gap: 0.4rem; margin-top: 0.5rem; } .afg-janela-ods label { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; gap: 0.4rem; margin: 0; font-size: var(--fs-sm); font-weight: 800; color: var(--cinza); } .afg-janela-vagas { display: grid; gap: 0.2rem; width: 9rem; margin: 0.9rem 0 0.3rem; font-size: var(--fs-sm); } .afg-janela-acoes { position: sticky; bottom: -1.3rem; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.1rem -1.4rem -1.3rem; padding: 0.8rem 1.4rem; background: var(--papel); border-top: 1px solid var(--borda); } .afg-tirar { flex-basis: 100%; text-align: left; font-size: var(--fs-xs); } .afg-campi { margin-top: 0.8rem; } .afg-atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.5rem; margin: 0 0 1.2rem; } .afg-atalhos .afg-atalho--nova { border-color: var(--indigo-700); border-width: 2px; } .afg-atalhos a { display: grid; align-content: start; gap: 0.15rem; padding: 0.65rem 0.8rem; border: 1px solid var(--borda); background: var(--papel); color: var(--tinta); text-decoration: none; } .afg-atalhos a:hover, .afg-atalhos a:focus-visible { border-color: var(--indigo-700); } .afg-atalhos b { font-size: var(--fs-sm); font-weight: 800; color: var(--indigo-700); } .afg-atalhos span { font-size: var(--fs-xs); line-height: 1.35; color: var(--cinza); } .afg-legenda { list-style: none; padding: 0; margin: 0.8rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; font-size: var(--fs-xs); color: var(--cinza); } .afg-legenda li { display: flex; align-items: center; gap: 0.4rem; } .afg-legenda-faixa { display: inline-block; width: 5px; height: 1.1rem; background: var(--indigo-700); } .afg-tipo { margin: 0; font-size: var(--fs-xs); font-weight: 800; color: var(--magenta-700); } .afg-tipo a { color: inherit; text-decoration: none; } .afg-tipo a:hover, .afg-tipo a:focus-visible { text-decoration: underline; } .afg-tipo--falta { font-style: italic; } .afg-quem a { color: inherit; } .afg-janela-sub { margin: 1.2rem 0 0.2rem; padding-top: 0.8rem; border-top: 1px solid var(--borda); font-size: var(--fs-sm); font-weight: 800; color: var(--indigo-700); } .afg-janela-tipo { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.6rem; } .afg-janela-tipo label { display: grid; gap: 0.25rem; flex: 1 1 11rem; min-width: 0; font-size: var(--fs-sm); font-weight: 700; } .afg-janela-tipo label[hidden] { display: none; } .afg-janela-tipo select, .afg-janela-tipo input { box-sizing: border-box; width: 100%; font-weight: 400; } .afg-janela-publico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; margin: 0.5rem 0 0; padding: 0; border: 0; min-inline-size: 0; font-size: var(--fs-sm); } .afg-janela-publico label { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.45rem 0.65rem; border: 1px solid var(--borda); cursor: pointer; } .afg-janela-publico label:has(input:checked) { border-color: var(--indigo-700); background: var(--superficie); font-weight: 700; } .afg-janela-publico input { flex: none; margin: 0; } .afg-pessoa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.5rem; align-items: end; gap: 0.4rem 0.8rem; margin: 0.5rem 0 0; padding: 0; border: 0; min-inline-size: 0; } .afg-pessoa--duas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .afg-pessoa[hidden] { display: none; } .afg-pessoa label { display: grid; gap: 0.2rem; margin: 0; font-size: var(--fs-sm); } .afg-pessoa input[type="text"], .afg-pessoa input[type="email"] { box-sizing: border-box; width: 100%; max-width: none; margin: 0; } .afg-pessoa button { padding-bottom: 0.55rem; font-size: var(--fs-xs); text-align: right; } @media (min-width: 34.01rem) { .afg-pessoa:not(.afg-pessoa--primeira) label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .afg-pessoa-mais { margin: 0.5rem 0 0; font-size: var(--fs-sm); } .afg-janela-dica { margin-top: 0.4rem !important; } @media (max-width: 34rem) { .afg-pessoa { grid-template-columns: minmax(0, 1fr); padding-bottom: 0.6rem; border-bottom: 1px solid var(--borda); } .afg-pessoa button { text-align: left; padding: 0; } .afg-janela-publico { grid-template-columns: minmax(0, 1fr); } } .afg-janela-nota { margin: 1rem 0 0; padding: 0.6rem 0.8rem; background: var(--superficie); font-size: var(--fs-xs); line-height: 1.45; } .afg-dias-abas { display: none; } @media (max-width: 40rem) { .afg-dias-abas:not([hidden]) { position: sticky; top: 0; z-index: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.35rem; margin: 0.8rem 0 0; padding: 0.4rem 0; background: var(--papel); } .afg-dias-abas button { display: grid; gap: 0.05rem; min-height: 2.9rem; padding: 0.35rem 0.25rem; font: inherit; color: var(--indigo-700); text-align: center; background: var(--papel); border: 1px solid var(--borda); cursor: pointer; } .afg-dias-abas b { font-size: var(--fs-sm); font-weight: 800; } .afg-dias-abas span { font-size: 0.7rem; } .afg-dias-abas button[aria-pressed="true"] { color: #fff; background: var(--indigo-700); border-color: var(--indigo-700); } .afg-rolagem { overflow: visible; margin-top: 0.4rem; } .afg-grade { grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 0.3rem; } .afg-canto { display: none; } .afg-grade--abas .afg-dia { display: none; } .afg-turno { padding-top: 0.7rem; } .afg-celula { padding: 0; background: none; border-top: 0; min-height: 0; } .afg-celula[data-no-dia=""] { display: none; } .afg-fora-do-dia { display: none; } .afg-numeros li:last-child:nth-child(odd) { grid-column: 1 / -1; } } .afg-sem { padding: 0; list-style: none; display: grid; gap: 0.4rem; } .afg-sem li { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; padding: 0.5rem 0.7rem; border: 1px solid var(--borda); } .afg-descartar { display: inline-flex; gap: 0.5rem; align-items: baseline; margin-left: auto; } .afg-repete { width: 11rem; padding: 0.2rem 0.4rem; font: inherit; font-size: 0.9rem; border: 1px solid var(--borda); } .workshop-mudar { margin-top: 0.8rem; } .workshop-mudar > summary { cursor: pointer; font-weight: 700; color: var(--indigo-700); } .workshop-mudar > form { margin-top: 0.8rem; } .workshop-horario ul { margin: 0.4rem 0 0; padding-left: 1.1rem; } .workshop-horario-por-que { margin: 0.7rem 0 0; font-size: var(--fs-sm); line-height: 1.55; max-width: 70ch; } /* A fila de e-mails. */ .fila-tabela { max-width: 52rem; } .fila-detalhe { margin-top: 1rem; } .fila-detalhe > summary { cursor: pointer; font-weight: 800; } .fila-falhas { margin: 0.6rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; font-size: var(--fs-sm); } /* A ocupação na grade do evento: quanto mais cheia, mais escuro o índigo; lotada vira magenta. A cor sai de `--pct`, posto em cada célula. */ .agenda-ocup { border-collapse: separate; border-spacing: 3px; font-variant-numeric: tabular-nums; min-width: 34rem; } .agenda-ocup thead th { font-size: var(--fs-sm); font-weight: 800; text-align: center; padding: 0.4rem 0.5rem; } .agenda-ocup thead th:first-child, .agenda-ocup-hora { text-align: left; } .agenda-ocup-hora { font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; padding-right: 0.6rem; color: var(--cinza); } .agenda-ocup-turno th { text-align: left; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--magenta-700); padding: 0.9rem 0 0.2rem; } .agenda-ocup-cel { min-width: 8.5rem; padding: 0; text-align: center; border: 1px solid var(--borda); background: color-mix(in srgb, var(--indigo-700) calc(var(--pct, 0) * 0.85%), var(--papel)); } .agenda-ocup-cel a { display: block; padding: 0.35rem 0.4rem; color: var(--tinta); text-decoration: none; } .agenda-ocup-cel a:hover, .agenda-ocup-cel a:focus-visible { outline: 2px solid var(--magenta-700); outline-offset: 1px; } .agenda-ocup-cel strong { display: block; font-size: 1rem; line-height: 1.2; } .agenda-ocup-cel small { display: block; font-size: var(--fs-xs); opacity: 0.85; white-space: nowrap; } .agenda-ocup-cel--escura a { color: #fff; } .agenda-ocup-cel--cheia { background: var(--magenta-700); border-color: var(--magenta-700); } .agenda-ocup-cel--cheia a { color: #fff; } .agenda-ocup-cel--vazia { background: transparent; border-style: dashed; color: var(--cinza-fraco); } .agenda-ocup tfoot th, .agenda-ocup tfoot td { padding: 0.6rem 0.4rem 0; text-align: center; font-size: var(--fs-sm); border-top: 2px solid var(--tinta); } .agenda-ocup tfoot th { text-align: left; } .agenda-ocup tfoot small { display: block; font-size: var(--fs-xs); color: var(--cinza); } .agenda-ocup-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; } .agenda-ocup-legenda span { display: inline-block; width: 1.1rem; height: 1.1rem; border: 1px solid var(--borda); margin-left: 0.5rem; background: color-mix(in srgb, var(--indigo-700) calc(var(--pct, 0) * 0.85%), var(--papel)); } .agenda-ocup-legenda span:first-child { margin-left: 0; } .agenda-ocup-legenda .agenda-ocup-legenda--cheia { background: var(--magenta-700); border-color: var(--magenta-700); } .agenda-ocup-tabelas { margin-top: 1.5rem; } .agenda-ocup-tabelas > summary { cursor: pointer; font-weight: 800; } .agenda-aperta th, .agenda-aperta td { color: var(--alerta); font-weight: 700; } .agenda-por { display: inline-flex; gap: 0.4rem; align-items: center; } .agenda-por select { font: inherit; font-size: var(--fs-xs); padding: 0.15rem 0.3rem; max-width: 15rem; } .agenda-programa-n { width: 2.5rem; font-weight: 800; font-size: 1rem; } .agenda-programa-ods { width: 2.5rem; } .agenda-programa-ods img { display: block; } /* O selo e o número na altura do título, e não na linha de baixo. */ .agenda-programa .cursos-tabela th, .agenda-programa .cursos-tabela td { vertical-align: top; } .agenda-programa-n, .agenda-programa-ods { padding-top: 0.55rem !important; } @media print { .agenda-programa-png, .agenda-comentar, .agenda-comentado, .agenda-apoio { display: none; } } /* O apoio no evento, na linha do pôster: magenta, como os outros alertas. */ .agenda-apoio { margin: 0.5rem 0 0; padding: 0.5rem 0.75rem; border-left: 3px solid var(--magenta-700); background: #fdf0f7; font-weight: 400; } .agenda-apoio p { margin: 0; font-size: var(--fs-sm); line-height: 1.45; } .agenda-apoio-t { display: flex; gap: 0.4rem; align-items: center; font-weight: 800; color: var(--magenta-700); } .agenda-apoio-fazer { color: var(--tinta); } .agenda-apoio-nota { color: var(--cinza); font-size: var(--fs-xs) !important; margin-top: 0.2rem !important; } .agenda-apoio-form form { display: grid; gap: 0.35rem; } .agenda-apoio-form label { font-size: var(--fs-sm); font-weight: 700; } .agenda-apoio-form select { font: inherit; font-size: var(--fs-sm); padding: 0.4rem; max-width: 22rem; } .agenda-comentar { margin-top: 0.35rem; font-weight: 400; } /* A conferência do pôster: a marca e os dois botões, na linha do pôster. */ .agenda-conferir { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.4rem; font-weight: 400; } .agenda-conferir form { margin: 0; } .agenda-marca-conf { font-size: var(--fs-xs); font-weight: 800; padding: 0.15rem 0.5rem; color: #fff; } .agenda-marca-conf--ok { background: var(--ok); } .agenda-marca-conf--ajustar { background: var(--magenta-700); } .agenda-conf-botao { font: inherit; font-size: var(--fs-xs); font-weight: 800; padding: 0.2rem 0.55rem; background: transparent; cursor: pointer; border: 1px solid; } .agenda-conf-botao--ok { color: var(--ok); } .agenda-conf-botao--ok:hover { background: var(--ok); color: #fff; } .agenda-conf-botao--ajustar { color: var(--magenta-700); } .agenda-conf-botao--ajustar:hover { background: var(--magenta-700); color: #fff; } .agenda-conferencia-abas { margin: 0.8rem 0 0.4rem; } /* Ao voltar de «OK», «Ajustar» ou do comentário, a linha do pôster fica à vista, com folga em cima, e piscando de leve para se achar. */ .agenda-linha { scroll-margin-top: 6rem; } .agenda-linha:target > * { animation: agenda-achado 2s ease-out; } @keyframes agenda-achado { from { background: #FFF3C4; } to { background: transparent; } } @media print { .agenda-conferir, .agenda-conferencia-abas { display: none; } } /* A área do trabalho, antes do título: pesquisa, ensino, extensão ou inclusão. */ .agenda-area { display: inline-block; margin-right: 0.45rem; padding: 0.05rem 0.45rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 0.12em; border: 1px solid currentColor; color: var(--indigo-700); } .agenda-area--extensao { color: var(--ok); } .agenda-area--ensino { color: var(--alerta); } .agenda-area--monitoria_inclusiva { color: var(--magenta-700); } .agenda-comentar summary { cursor: pointer; font-size: var(--fs-xs); font-weight: 700; color: var(--indigo-700); } .agenda-comentar form { display: grid; gap: 0.4rem; justify-items: start; margin-top: 0.4rem; max-width: 40rem; } .agenda-comentar textarea { font: inherit; font-size: var(--fs-sm); width: 100%; padding: 0.5rem; border: 1px solid var(--borda); } .agenda-comentar .btn { margin: 0; } .agenda-comentario-antigo { margin: 0.4rem 0 0; font-size: var(--fs-xs); color: var(--cinza); } .agenda-comentado { color: var(--magenta-700); font-weight: 700; } /* O comentário da comissão, em super destaque: magenta, ícone e o botão que leva ao passo do PDF. */ .agenda-comentarios { margin: 1.5rem 0; padding: 1.2rem 1.4rem; border: 3px solid var(--magenta-700); background: #fdf0f7; box-shadow: 0 0 0 4px #f9d9ea; } .agenda-comentarios-t { display: flex; gap: 0.6rem; align-items: center; margin: 0 0 0.7rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; color: var(--magenta-700); } .agenda-comentarios-msg { margin: 0 0 0.5rem; font-size: 1.1rem; line-height: 1.5; color: var(--tinta); } .agenda-comentarios-acao { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin: 0.9rem 0 0; font-size: var(--fs-sm); color: var(--magenta-700); } .agenda-comentarios-btn { margin: 0; background: var(--magenta-700); border-color: var(--magenta-700); color: #fff; } .agenda-comentarios-prazo { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid #f2bfdb; font-size: var(--fs-sm); color: var(--tinta); } .agenda-comentarios-prazo p { margin: 0 0 0.35rem; } .agenda-comentarios-prazo ul { margin: 0 0 0.5rem; padding-left: 1.2rem; } .agenda-comentarios-prazo li { margin: 0 0 0.2rem; line-height: 1.5; } .agenda-comentarios-btn:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; } .agenda-comentario-texto { white-space: pre-line; } @media print { .agenda-programa .hub-d, .agenda-programa .admin-voltar { display: none; } .agenda-programa-sessao { break-inside: avoid; } .agenda-programa-dia { break-before: page; } .agenda-programa-dia:first-of-type { break-before: auto; } } .agenda-por--topo { margin: 0.6rem 0 0.4rem; flex-wrap: wrap; } .agenda-por--topo input { font: inherit; font-size: var(--fs-sm); padding: 0.3rem 0.5rem; width: 11rem; } /* ------------------------------------------------------------------ monitoria A inscrição: os turnos do campus marcado, uma função por turno. */ .monitoria-turnos--uberaba, .monitoria-turnos--iturama { display: none; } .monitoria-form:has(input[name="campus"][value="uberaba"]:checked) .monitoria-turnos--uberaba, .monitoria-form:has(input[name="campus"][value="iturama"]:checked) .monitoria-turnos--iturama { display: block; } .monitoria-form:has(input[name="campus"]:checked) .monitoria-sem-campus { display: none; } /* O docente só em Iturama, e sem período nem RGA. */ .monitoria-so-iturama { display: none !important; } .monitoria-form:has(input[name="campus"][value="iturama"]:checked) .monitoria-so-iturama { display: flex !important; } .monitoria-docente { display: none; } .monitoria-form:has(input[name="bond"][value="docente"]:checked) .monitoria-docente { display: inline; } .monitoria-form:has(input[name="bond"][value="docente"]:checked) .monitoria-estudante { display: none; } .monitoria-linha { grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 0.8rem; } /* Cada turno é um cartão: o dia numa faixa no alto, e o resto dentro. O fieldset tem largura mínima do conteúdo por padrão, e a grade de funções vazava pela direita. */ .monitoria-turno { min-width: 0; border: 1px solid var(--borda); border-top: 4px solid var(--indigo-700); background: var(--papel); padding: 0 1rem 1rem; margin: 1.25rem 0 0; } .monitoria-turno legend { float: left; width: calc(100% + 2rem); margin: 0 -1rem 0.6rem; padding: 0.55rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--borda); font-weight: 800; font-size: 1.05rem; } .monitoria-turno legend + * { clear: both; } .monitoria-regra { border-left: 4px solid var(--magenta-500); background: var(--superficie); padding: 0.8rem 1rem; margin: 0.8rem 0 0.4rem; font-size: 1rem; line-height: 1.5; } .monitoria-regra p { margin: 0 0 0.3rem; } .monitoria-regra p:last-child { margin-bottom: 0; } /* O horário em destaque: é o que a pessoa confere antes de escolher. */ .monitoria-horas { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; margin: 0.35rem 0 0.2rem; } .monitoria-hora { font-size: 1.25rem; font-weight: 800; color: var(--indigo-700); font-variant-numeric: tabular-nums; } .monitoria-cert { font-size: var(--fs-sm); font-weight: 700; color: var(--ok); } .monitoria-total { margin: 0.6rem 0 0; } .monitoria-local { color: var(--magenta-700); font-weight: 700; } .monitoria-hora--aberta { font-size: 1rem; color: var(--cinza); } .monitoria-chegada { font-size: var(--fs-sm); font-weight: 700; color: var(--tinta); background: var(--superficie); border: 1px solid var(--borda); padding: 0.15rem 0.55rem; font-variant-numeric: tabular-nums; } .monitoria-funcoes { display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); margin-top: 0.5rem; } /* O rádio ao lado do nome, e o nome numa linha só: o label do formulário é bloco, e o nome descia para baixo do rádio. */ .monitoria-funcoes .opcao { display: flex !important; align-items: flex-start; gap: 0.55rem; } .monitoria-funcoes .opcao strong { white-space: nowrap; } .monitoria-cheia { opacity: 0.5; cursor: not-allowed; } .monitoria-nao strong { font-weight: 400; color: var(--cinza); } .monitoria-funcoes-ajuda { margin-top: 1.2rem; font-size: var(--fs-sm); } .monitoria-funcoes-ajuda summary { cursor: pointer; font-weight: 700; color: var(--indigo-700); } .monitoria-funcoes-ajuda dt { font-weight: 700; margin-top: 0.5rem; } .monitoria-funcoes-ajuda dd { margin: 0; color: var(--cinza); } .monitoria-termo { border-left: 3px solid var(--indigo-700); background: var(--superficie); padding: 0.8rem 1rem; font-size: var(--fs-sm); line-height: 1.55; } .monitoria-termo p { margin: 0 0 0.4rem; } .monitoria-termo ul { margin: 0 0 0.6rem; padding-left: 1.2rem; } .monitoria-meus { margin: 0.4rem 0 0; padding-left: 1.2rem; } .monitoria-meus:has(.monitoria-meu-turno) { list-style: none; padding: 0; display: grid; gap: 0.6rem; margin: 0.7rem 0 0.9rem; } .monitoria-meu-turno { padding: 0.8rem 1rem; background: var(--papel); border: 1px solid var(--borda); min-width: 0; } .monitoria-meu-turno-t { margin: 0; font-weight: 800; overflow-wrap: anywhere; } .monitoria-meu-turno-t span { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; font-size: var(--fs-xs); font-weight: 800; color: var(--indigo-700); border: 1px solid var(--indigo-700); } .monitoria-meu-turno-d { margin: 0.2rem 0 0; font-size: var(--fs-sm); color: var(--cinza); } .monitoria-oficina { margin-top: 0.7rem; display: grid; gap: 0.5rem; min-width: 0; } .monitoria-oficina p { margin: 0; } .monitoria-oficina-minha { display: grid; gap: 0.1rem; padding: 0.6rem 0.8rem; font-size: var(--fs-sm); background: #EAF5EE; border-left: 4px solid var(--ok); overflow-wrap: anywhere; } .monitoria-oficina-minha span { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #1D6B3F; } .monitoria-oficina-minha strong { font-size: 1rem; } .monitoria-oficina-alerta { padding: 0.6rem 0.8rem; font-size: var(--fs-sm); background: #FBEFF5; border-left: 4px solid var(--magenta-700); } .monitoria-oficina-troca summary { cursor: pointer; font-weight: 800; color: var(--indigo-700); } .monitoria-oficina-troca[open] summary { margin-bottom: 0.5rem; } .monitoria-oficina-troca fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 0.4rem; min-width: 0; } .monitoria-oficina-opcao { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem 0.75rem; background: #fff; border: 1px solid var(--borda); cursor: pointer; overflow-wrap: anywhere; } .monitoria-oficina-opcao:hover { border-color: var(--indigo-700); } .monitoria-oficina-opcao:has(input:checked) { border: 2px solid var(--indigo-700); background: var(--superficie); } .monitoria-oficina-opcao input { margin-top: 0.25rem; flex: none; } .monitoria-oficina-opcao span { display: grid; gap: 0.1rem; min-width: 0; } .monitoria-oficina-opcao b { font-weight: 700; } .monitoria-oficina-opcao small { font-size: var(--fs-xs); color: var(--cinza); } .monitoria-oficina-opcao--ocupada { cursor: not-allowed; opacity: 0.6; } .monitoria-oficina-opcao--ocupada:hover { border-color: var(--borda); } .monitoria-oficina-tag { font-weight: 800; color: var(--magenta-700) !important; } .monitoria-tarefas { margin: 0.8rem 0 1rem; padding: 1.1rem 1.3rem; color: #fff; background: linear-gradient(120deg, var(--magenta-700), #5E1240); overflow-wrap: anywhere; } .monitoria-tarefas h2 { margin: 0 0 0.4rem; font-size: 1.25rem; font-weight: 800; color: #fff; } .monitoria-tarefas p { margin: 0 0 0.5rem; font-size: var(--fs-sm); line-height: 1.5; color: rgba(255,255,255,.92); } .monitoria-tarefas ul { margin: 0 0 0.8rem; padding: 0; list-style: none; display: grid; gap: 0.4rem; } .monitoria-tarefas li { position: relative; padding-left: 1.6rem; font-size: var(--fs-sm); line-height: 1.5; } .monitoria-tarefas li::before { content: '✓'; position: absolute; left: 0; top: 0; font-weight: 800; color: #FFD9EC; } .monitoria-tarefas strong { color: #fff; } .monitoria-tarefas .monitoria-tarefas-postura { margin: 0; padding-top: 0.7rem; border-top: 1px solid rgba(255,255,255,.35); font-weight: 700; color: #fff; } .monitoria-ficha-t { margin: 2.5rem 0 0.3rem; font-size: 1.45rem; font-weight: 800; } .monitoria-ficha-d { margin: 0 0 0.9rem; font-size: var(--fs-sm); color: var(--cinza); } .monitoria-oficina .monitoria-oficina-destaque { justify-self: start; margin-top: 0.25rem; padding: 0.2rem 0.55rem; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0; text-transform: none; color: #fff; background: var(--indigo-700); } .monitoria-oficina-opcao--ocupada .monitoria-oficina-destaque { background: var(--cinza); } .monitoria-oficina .monitoria-oficina-chegada { margin-top: 0.2rem; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0; text-transform: none; color: #fff; } .monitoria-oficina .monitoria-oficina-hora { font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--indigo-700); } .monitoria-oficina-botoes { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-top: 0.6rem; } .monitoria-desistir { margin-top: 0.6rem; } .monitoria-cancelar { background: transparent; color: var(--magenta-700); border-color: var(--magenta-700); } .monitoria-cancelar:hover { background: var(--magenta-700); color: #fff; } /* No painel: o preenchimento de cada campus, turno e função, e quem tomou cada vaga. */ .mon-adm-resumo { margin: 1rem 0; max-width: 34rem; } .mon-adm-resumo p { margin: 0 0 0.4rem; } .mon-adm-n { font-size: 1.6rem; color: var(--indigo-700); } .mon-adm-barra { display: block; height: 0.5rem; background: var(--superficie); border: 1px solid var(--borda); flex: 1; min-width: 4rem; } .mon-adm-barra span { display: block; height: 100%; background: var(--indigo-700); } .mon-adm-barra-topo { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: space-between; margin: 1rem 0; } .mon-adm-barra-topo .admin-abas { margin: 0; } .mon-adm-turno { border: 1px solid var(--borda); border-top: 4px solid var(--indigo-700); background: var(--papel); margin: 1.25rem 0 0; } .mon-adm-cab { background: var(--superficie); border-bottom: 1px solid var(--borda); padding: 0.6rem 1rem; } .mon-adm-cab h2 { font-size: 1.05rem; margin: 0; } .mon-adm-cab p { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; margin: 0.3rem 0 0; } .mon-adm-funcao { padding: 0.7rem 1rem; border-bottom: 1px solid var(--borda); } .mon-adm-funcao:last-child { border-bottom: 0; } .mon-adm-funcao-cab { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; } .mon-adm-funcao-cab strong { min-width: 11rem; } .mon-adm-conta { font-size: var(--fs-sm); color: var(--cinza); font-variant-numeric: tabular-nums; min-width: 8rem; } .mon-adm-conta--cheia { color: var(--ok); font-weight: 700; } /* Uma pessoa por linha, em colunas: nome, dados e WhatsApp alinhados. */ .mon-adm-pessoas { margin: 0.5rem 0 0; padding-left: 1.6rem; font-size: var(--fs-sm); } .mon-adm-pessoas li { padding: 0.3rem 0; border-top: 1px dashed var(--borda); } .mon-adm-pessoas li > div { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr) auto; gap: 0.2rem 1rem; align-items: baseline; } @media (max-width: 40rem) { .mon-adm-pessoas li > div { grid-template-columns: 1fr; } } .mon-adm-nome { font-weight: 700; } .mon-adm-dados { display: block; font-size: var(--fs-xs); color: var(--cinza); font-weight: 400; } .mon-adm-zap { white-space: nowrap; font-variant-numeric: tabular-nums; } .mon-adm-turnos { margin: 0; padding-left: 1rem; } /* Mover, tirar e pôr: as ações da comissão, discretas, na linha da pessoa. */ .mon-adm-pessoas li > .mon-adm-acoes, .mon-adm-acoes { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: center; margin-top: 0.25rem; font-size: var(--fs-xs); } .mon-adm-acoes form { display: flex; gap: 0.35rem; align-items: center; margin: 0; } .mon-adm-mover label { font-weight: 700; color: var(--cinza); margin: 0; } .mon-adm-mover select { font: inherit; font-size: var(--fs-xs); padding: 0.3rem 1.8rem 0.3rem 0.55rem; max-width: 24rem; border: 1px solid var(--borda); background: var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%232E35A8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.5rem center / 0.8rem; appearance: none; -webkit-appearance: none; color: var(--tinta); cursor: pointer; } .mon-adm-mover select:focus { outline: 2px solid var(--indigo-700); outline-offset: 1px; } /* Os botões das ações: ícone e texto, pequenos e com borda, para o clique não depender de achar um link sublinhado. */ .mon-adm-botao { display: inline-flex; align-items: center; gap: 0.3rem; font: inherit; font-size: var(--fs-xs); font-weight: 800; padding: 0.3rem 0.6rem; border: 1px solid var(--indigo-700); background: transparent; color: var(--indigo-700); cursor: pointer; } .mon-adm-botao:hover { background: var(--indigo-700); color: #fff; } .mon-adm-botao--risco { border-color: var(--borda); color: var(--cinza); } .mon-adm-botao--risco:hover { background: var(--magenta-700); border-color: var(--magenta-700); color: #fff; } .mon-adm-por { margin-top: 0.5rem; font-size: var(--fs-sm); } .mon-adm-por summary { cursor: pointer; color: var(--indigo-700); font-weight: 700; } .mon-adm-por form { display: grid; grid-template-columns: 2fr 2fr 1.2fr auto; gap: 0.4rem; margin-top: 0.4rem; } .mon-adm-por input { font: inherit; font-size: var(--fs-sm); padding: 0.4rem 0.5rem; border: 1px solid var(--borda); } .mon-adm-por .btn { margin: 0; } @media (max-width: 48rem) { .mon-adm-por form { grid-template-columns: 1fr; } } @media (max-width: 40rem) { .monitoria-linha { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ atividades por ODS A cobertura: vermelho é o ODS sem proposta, amarelo o que depende de uma. */ .ods-cob-nome { display: inline-flex; align-items: center; gap: 0.6rem; } .ods-cob-nome img { flex: none; } .ods-cob tr.ods-cob--zero th, .ods-cob tr.ods-cob--zero td { background: #FBEAEA; } .ods-cob tr.ods-cob--uma th, .ods-cob tr.ods-cob--uma td { background: #FFF5D6; } .ods-cob-legenda { display: inline-block; padding: 0.1rem 0.5rem; margin-right: 0.6rem; } .ods-cob-legenda.ods-cob--zero { background: #FBEAEA; } .ods-cob-legenda.ods-cob--uma { background: #FFF5D6; } .ods-cob-lista { padding-left: 1.4rem; margin: 0.8rem 0 0; } .ods-cob-item { margin: 0 0 0.9rem; } .ods-cob-t { font-weight: 700; display: block; } .ods-cob-selos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.3rem; } .ods-cob-selos img { display: block; } .ods-cob-selo--outro { opacity: 0.35; } .ods-cob-selos small { font-size: var(--fs-xs); color: var(--cinza); margin-left: 0.3rem; } /* ------------------------------------------------------------------ avaliador de pôster Os dados de servidor e os de doutorando aparecem conforme a categoria. */ .avaliador-servidor, .avaliador-doutorando { display: none; } .avaliador-form:has(input[name="category"][value="docente"]:checked) .avaliador-servidor, .avaliador-form:has(input[name="category"][value="tae"]:checked) .avaliador-servidor, .avaliador-form:has(input[name="category"][value="doutorando"]:checked) .avaliador-doutorando { display: block; } .avaliador-titulacao { grid-template-columns: repeat(3, 1fr); } @media (max-width: 40rem) { .avaliador-titulacao { grid-template-columns: 1fr; } } .avaliador-form select { font: inherit; width: 100%; padding: 0.5rem; margin-top: 0.3rem; } /* O estado do cadastro, em destaque: âmbar esperando, verde aceito, magenta recusado. */ .aval-estado { border: 1px solid var(--borda); border-left: 6px solid var(--alerta); background: #FFF8E6; padding: 1rem 1.25rem; margin: 1.25rem 0; } .aval-estado p { margin: 0 0 0.35rem; } .aval-estado p:last-child { margin-bottom: 0; } .aval-estado-selo { display: inline-block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--alerta); padding: 0.2rem 0.6rem; } .aval-estado-t { font-size: 1.3rem; font-weight: 800; line-height: 1.3; margin-top: 0.5rem !important; } .aval-estado--accepted { border-left-color: var(--ok); background: #EAF5EE; } .aval-estado--accepted .aval-estado-selo { background: var(--ok); } .aval-estado--refused { border-left-color: var(--magenta-700); background: #FBEFF5; } .aval-estado--refused .aval-estado-selo { background: var(--magenta-700); } /* No painel: um cadastro por linha, com as decisões ao lado. */ .aval-adm-lista { list-style: none; padding: 0; margin: 0.6rem 0 0; } .aval-adm-item { display: flex; flex-wrap: wrap; gap: 0.8rem 1.5rem; justify-content: space-between; align-items: flex-start; padding: 0.8rem 0; border-bottom: 1px solid var(--borda); } .aval-adm-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; } /* Os botões na mesma linha e do mesmo tamanho: o «Aceitar» herdava a margem de cima do `.btn-mais`, e o «Recusar» é um summary com a borda do `.btn-n`. */ .aval-adm-acoes form { margin: 0; } .aval-adm-estado { display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.45rem; font-size: var(--fs-xs); font-weight: 800; color: #fff; background: var(--alerta); vertical-align: 0.1em; } .aval-adm-estado--accepted { background: var(--ok); } .aval-adm-estado--refused { background: var(--magenta-700); } .aval-adm-estado--pq { background: var(--indigo-700); } /* Os bolsistas PQ: a explicação ao lado do botão, e a tabela com quem falta em cima, marcado na borda. */ .aval-pq-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-bottom: 0.8rem; } .aval-pq-cabeca p { flex: 1 1 28rem; margin: 0; } .aval-pq-cabeca form { margin: 0; } .aval-pq-rolagem { overflow-x: auto; margin-bottom: 1.5rem; } /* A largura toda, e não os 46rem da `.painel-tabela`: espremida, «PQ-C» quebrava no hífen. Só a área quebra; o resto cabe numa linha. */ .aval-pq { max-width: none; } .aval-pq th, .aval-pq td { white-space: nowrap; vertical-align: top; } .aval-pq th[scope="row"] { font-weight: 700; } .aval-pq td { font-size: var(--fs-sm); } .aval-pq .aval-pq-area { white-space: normal; min-width: 14rem; } .aval-pq-falta th[scope="row"] { box-shadow: inset 4px 0 0 var(--alerta); padding-left: 0.8rem; } /* O convite por link, no formato da ficha: a categoria mostra os campos de servidor ou de doutorando. */ .aval-adm-convite { display: grid; gap: 0.9rem; margin: 0.8rem 0 1.5rem; padding: 1rem 1.2rem; border: 1px solid var(--borda); background: var(--superficie); } .aval-conv-opcoes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; } .aval-conv-opcoes legend { font-size: var(--fs-sm); font-weight: 800; padding: 0; margin-bottom: 0.35rem; } .aval-conv-opcoes label { display: flex; gap: 0.4rem; align-items: center; font-size: var(--fs-sm); cursor: pointer; } .aval-conv-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.6rem 0.8rem; } .aval-conv-campos label { display: grid; gap: 0.25rem; font-size: var(--fs-sm); font-weight: 700; } .aval-conv-campos input { font: inherit; font-weight: 400; padding: 0.5rem 0.6rem; border: 1px solid var(--borda); background: #fff; } .aval-conv-servidor, .aval-conv-doutorando { display: none; } .aval-conv-servidor { gap: 0.9rem; } .aval-adm-convite:has(input[name="categoria"][value="docente"]:checked) .aval-conv-servidor, .aval-adm-convite:has(input[name="categoria"][value="tae"]:checked) .aval-conv-servidor { display: grid; } .aval-adm-convite:has(input[name="categoria"][value="doutorando"]:checked) .aval-conv-doutorando { display: grid; } .aval-adm-convite .btn { margin: 0; } .aval-adm-acoes .btn { margin: 0; min-height: 2.75rem; } .aval-adm-recusa summary { list-style: none; cursor: pointer; } .aval-adm-recusa summary::-webkit-details-marker { display: none; } .aval-adm-recusa form { display: grid; gap: 0.4rem; margin-top: 0.5rem; min-width: 16rem; } .aval-adm-recusa textarea { font: inherit; font-size: var(--fs-sm); padding: 0.4rem; } /* ------------------------------------------------------------------ painel Os resumos em números grandes, a situação numa barra, o agendamento por campus e as tabelas de campus e área. O resto, recolhido. */ .painel-kpis { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 0.6rem; margin: 1.2rem 0 0.6rem; } .painel-kpi { display: grid; align-content: start; gap: 0.15rem; padding: 0.9rem 1rem; border: 1px solid var(--borda); border-top: 4px solid var(--cinza-fraco, var(--borda)); background: var(--papel); color: var(--tinta); text-decoration: none; } .painel-kpi:hover { border-color: var(--indigo-700); } .painel-kpi-n { font-size: 2rem; font-weight: 800; line-height: 1.05; } .painel-kpi-r { font-size: var(--fs-sm); font-weight: 700; } .painel-kpi-p { font-size: var(--fs-xs); color: var(--cinza); } .painel-kpi--total { border-top-color: var(--indigo-700); background: var(--superficie); } .painel-kpi--total .painel-kpi-n { font-size: 2.6rem; color: var(--indigo-700); } .painel-kpi--ok { border-top-color: var(--ok); } .painel-kpi--espera { border-top-color: var(--alerta); } .painel-kpi--nao { border-top-color: var(--magenta-700); } .painel-rascunhos { margin: 0 0 0.8rem; } .painel-barra { display: flex; gap: 2px; margin: 0 0 1.6rem; } .painel-barra > span { display: block; min-width: 6.5rem; padding: 0.3rem 0.6rem; color: #fff; } .painel-barra-r { font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; } .painel-cartao-p { margin-left: 0.4rem; font-weight: 800; color: var(--indigo-700); } .painel-barra--ok { background: var(--ok); } .painel-barra--espera { background: var(--alerta); } .painel-barra--nao { background: var(--magenta-700); } .painel-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.6rem; margin-top: 0.6rem; } .painel-cartao { display: grid; gap: 0.35rem; padding: 0.9rem 1rem; border: 1px solid var(--borda); background: var(--papel); color: var(--tinta); text-decoration: none; } .painel-cartao:hover { border-color: var(--indigo-700); } .painel-cartao-t { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cinza); } .painel-cartao-n b { font-size: 1.6rem; color: var(--indigo-700); } .painel-cartao-d { font-size: var(--fs-xs); color: var(--cinza); } .painel-tabela { max-width: 46rem; margin-top: 0.4rem; } .painel-mais { margin-top: 2rem; border-top: 1px solid var(--borda); padding-top: 1rem; } .painel-mais > summary { cursor: pointer; font-weight: 800; color: var(--indigo-700); } @media (max-width: 48rem) { .painel-kpis { grid-template-columns: repeat(2, 1fr); } .painel-kpi--total { grid-column: 1 / -1; } } /* Os títulos de A a Z (`/painel/titulos`): a barra de letras, e o título com o que merece conferir. O que tem sinal leva a borda de alerta. */ .titulos-so { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); } .titulos-letras { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin: 1rem 0; font-weight: 700; } .titulos-letra { margin: 1.6rem 0 0.4rem; font-size: 1.1rem; font-weight: 800; border-bottom: 1px solid var(--borda); padding-bottom: 0.2rem; } .titulos-lista { list-style: none; margin: 0; padding: 0; } .titulos-item { padding: 0.5rem 0 0.5rem 0.8rem; border-left: 4px solid transparent; border-bottom: 1px solid var(--borda); } .titulos-item--sinal { border-left-color: var(--alerta); } .titulos-t { margin: 0; line-height: 1.4; } .titulos-meta { margin: 0.2rem 0 0; font-size: var(--fs-xs); color: var(--cinza); display: flex; flex-wrap: wrap; gap: 0.2rem 0.4rem; align-items: center; } .titulos-sinal { padding: 0.05rem 0.4rem; font-weight: 700; color: #fff; background: var(--alerta); } .titulos-sinal--repetido { background: var(--magenta-700); } .titulos-sinal--parecido { background: var(--indigo-700); } .titulos-oficial { color: var(--ok); font-weight: 700; } .titulos-editar { margin-top: 0.3rem; font-size: var(--fs-sm); } .titulos-editar summary { cursor: pointer; color: var(--indigo-700); font-weight: 700; font-size: var(--fs-xs); } .titulos-editar form { display: grid; gap: 0.4rem; margin-top: 0.4rem; max-width: 52rem; } .titulos-editar textarea { width: 100%; font: inherit; } .titulos-editar .btn { justify-self: start; margin: 0; } .titulos-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0; } .titulos-salvo { animation: titulos-salvo 2s ease-out; } @keyframes titulos-salvo { from { background: color-mix(in srgb, var(--ok) 18%, transparent); } to { background: transparent; } } /* Os arquivos de «Minha atividade»: nome, tamanho e visibilidade, e o tirar ao lado */ .workshop-arquivos { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--borda); } .workshop-arquivos li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; padding: 0.6rem 0; border-bottom: 1px solid var(--borda); } .workshop-arquivos li a { font-weight: 700; overflow-wrap: anywhere; } .workshop-arquivos form { margin-left: auto; } /* O envio de arquivo da atividade veste o do PDF do pôster (`.agenda-envio`), ocupando a largura do bloco, com as duas visibilidades lado a lado. */ .workshop-envio { justify-items: stretch; margin-top: 0.5rem; } .workshop-envio input[type="file"] { width: 100%; } .workshop-envio .opcoes { margin: 0.4rem 0 0; } .workshop-envio .acoes-form { margin-top: 0.4rem; } /* Quem conduz, em «Minha atividade»: a foto (ou a inicial) ao lado da descrição */ .workshop-pessoa { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 0.9rem 0; border-top: 1px solid var(--borda); } .workshop-pessoa:first-of-type { border-top: 0; } .workshop-pessoa-foto { width: 5.5rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--superficie); border: 1px solid var(--borda); display: grid; place-items: center; font-size: 1.8rem; font-weight: 800; color: var(--indigo-700); } .workshop-pessoa-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } .workshop-pessoa-campos > label:first-child { margin-top: 0; } @media (max-width: 560px) { .workshop-pessoa { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.7rem; } .workshop-pessoa-foto { width: 3.5rem; font-size: 1.2rem; } } /* «Quando e onde», no alto de «Minha atividade»: cada encontro com dia, horário e local, cada um com o seu ícone, e as vagas no rodapé */ .workshop-quando { margin: 1.2rem 0 1.6rem; padding: 1.1rem 1.25rem; background: var(--superficie); border-left: 4px solid var(--indigo-700); } .workshop-quando-t { margin: 0 0 0.7rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--magenta-700); } .workshop-quando-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; } .workshop-quando-lista li { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; align-items: center; } .workshop-quando-parte { flex-basis: 100%; font-size: var(--fs-xs); font-weight: 800; color: var(--cinza); } .workshop-quando-item { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--tinta); } .workshop-quando-item .icone { color: var(--indigo-700); flex: none; } .workshop-quando-dia { font-weight: 800; } .workshop-quando-rodape { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; align-items: center; margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--borda); } .workshop-quando-rodape .campo-nota { margin: 0; } /* O card para o Instagram: a imagem à esquerda, a legenda à direita; um embaixo do outro no celular */ .workshop-card { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: 2rem; align-items: start; margin-top: 1.2rem; } .workshop-card-img canvas { width: 100%; height: auto; display: block; border: 1px solid var(--borda); } .workshop-card-legenda textarea { width: 100%; font: inherit; font-size: var(--fs-sm); line-height: 1.5; } @media (max-width: 760px) { .workshop-card { grid-template-columns: minmax(0, 1fr); } } /* «JIEPE em 1 minuto»: o card e a capa lado a lado, as duas legendas lado a lado, os dois links; tudo um embaixo do outro no celular */ .um-min-bloco { max-width: 52rem; } .um-min-passos { display: grid; gap: 0.6rem; padding-left: 1.3rem; } .um-min-tabela { margin: 0.4rem 0 1rem; } .um-min-cards { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem; align-items: end; max-width: 52rem; } .um-min-cards canvas { width: 100%; height: auto; display: block; border: 1px solid var(--borda); } .um-min-legendas, .um-min-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: 52rem; margin-top: 1.2rem; } .um-min-legendas textarea { width: 100%; font: inherit; font-size: var(--fs-sm); line-height: 1.5; } .um-min-ok { color: var(--ok); } .um-min-nao { color: var(--magenta-700); } @media (max-width: 760px) { .um-min-cards, .um-min-legendas, .um-min-links { grid-template-columns: minmax(0, 1fr); } } /* os critérios da ficha do pôster, cada um com as faixas de nota */ .um-min-criterios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0.6rem 0 1.2rem; } .um-min-criterio { padding: 0.9rem 1rem; background: var(--superficie); border-left: 3px solid var(--indigo-700); } /* o peso sempre na linha de baixo do nome: ao lado, quebrava num critério e não nos outros */ .um-min-criterio-t { margin: 0; } .um-min-peso { display: block; margin-top: 0.15rem; font-size: var(--fs-xs); font-weight: 800; color: var(--magenta-700); text-transform: uppercase; letter-spacing: 0.06em; } .um-min-faixas { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0.3rem 0.6rem; margin: 0.5rem 0 0; font-size: var(--fs-sm); } .um-min-faixas dt { font-weight: 800; color: var(--indigo-700); font-variant-numeric: tabular-nums; } .um-min-faixas dd { margin: 0; } .um-min-sub { margin: 1.2rem 0 0.4rem; font-size: 1.05rem; } .um-min-conta { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 0.6rem; margin: 0.8rem 0 1rem; } .um-min-conta > div { display: grid; align-content: center; gap: 0.15rem; padding: 0.8rem 0.9rem; text-align: center; background: var(--superficie); border: 1px solid var(--borda); } .um-min-conta small { font-size: var(--fs-xs); font-weight: 700; color: var(--cinza); } .um-min-conta b { font-size: 1.3rem; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; } .um-min-conta > span { align-self: center; font-size: 1.5rem; font-weight: 800; color: var(--cinza); } .um-min-conta-d { border-color: var(--magenta-700) !important; background: #FBE3F1 !important; } .um-min-conta-d b { color: var(--magenta-700); } .um-min-conta-f { background: var(--indigo-700) !important; border-color: var(--indigo-700) !important; } .um-min-conta-f small, .um-min-conta-f b { color: #fff; } .um-min-premio { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0 0 1rem; padding: 0.9rem 1rem; background: #E6F2EA; border-left: 4px solid #1D6B3F; } .um-min-premio svg { width: 1.6rem; height: 1.6rem; flex: none; fill: none; stroke: #1D6B3F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 560px) { .um-min-conta { gap: 0.3rem; } .um-min-conta > div { padding: 0.55rem 0.35rem; } .um-min-conta small { font-size: 0.68rem; line-height: 1.2; } .um-min-conta b { font-size: 1.05rem; } .um-min-conta > span { font-size: 1.1rem; } } @media (max-width: 760px) { .um-min-criterios { grid-template-columns: minmax(0, 1fr); } } /* «volte aqui e cole o link»: o recado que mais se perde, em magenta cheio */ .um-min-volte { margin: 0.6rem 0 1.2rem; padding: 1.2rem 1.4rem; background: var(--magenta-700); color: #fff; max-width: 52rem; } .um-min-volte-t { margin: 0 0 0.5rem; font-size: 1.3rem; font-weight: 800; line-height: 1.25; } .um-min-volte p { color: #fff; } .um-min-volte p:last-child { margin-bottom: 0; } .um-min-volte strong { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* a ficha do pôster recolhida no fim da página da JIEPE em 1 minuto */ .um-min-ficha { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--borda); } .um-min-ficha > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; } .um-min-ficha > summary::-webkit-details-marker { display: none; } .um-min-ficha > summary h2 { margin: 0; display: inline; } .um-min-ficha > summary::after { content: "abrir ▾"; font-size: var(--fs-xs); font-weight: 800; color: var(--magenta-700); } .um-min-ficha[open] > summary::after { content: "fechar ▴"; } .um-min-corte { max-width: 52rem; margin: 1rem 0 0; } /* gestão do evento: o credenciamento e o crachá (02/11/2026) */ .evento-lista { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.6rem; } .evento-pessoa { padding: 0.9rem 1rem; background: var(--superficie); border: 1px solid var(--borda); border-left: 4px solid var(--indigo-700); } .evento-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem; } .evento-quem { flex: 1 1 100%; display: grid; gap: 0.15rem; } .evento-quem strong { font-size: 1.1rem; } .evento-form label { display: grid; gap: 0.25rem; font-size: var(--fs-sm); font-weight: 700; } .evento-form input[type="text"], .evento-form select { font: inherit; font-weight: 400; padding: 0.5rem 0.7rem; border: 1px solid var(--borda); min-width: 14rem; } .evento-manual, .evento-ajuda { margin-top: 1.4rem; padding: 0.9rem 1rem; border: 1px dashed var(--borda); } .evento-manual summary, .evento-ajuda summary { cursor: pointer; font-weight: 800; color: var(--indigo-700); } .evento-manual .evento-form { margin-top: 0.8rem; } .evento-ajuda ol { margin: 0.6rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; font-size: var(--fs-sm); } /* a cor do texto do crachá tem nome próprio: com «--tinta», os links da linha herdavam o branco e sumiam */ .evento-cracha { flex: 1 1 100%; margin: 0; padding: 0.5rem 0.8rem; font-size: var(--fs-sm); color: var(--cracha-tinta, var(--tinta)); background: var(--cor); } .evento-cracha b { letter-spacing: 0.04em; } .evento-cracha--mini { display: inline-block; flex: none; margin: 0.2rem 0.2rem 0 0; padding: 0.15rem 0.5rem; font-size: var(--fs-xs); font-weight: 800; } .evento-lista-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin: 1rem 0; } .evento-lista-cab p { margin: 0; line-height: 2; } .evento-cats { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.4rem; } .evento-cats li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; padding: 0.45rem 0.7rem; background: var(--superficie); border-left: 5px solid var(--cor); } .evento-cats li .evento-cracha--mini { margin: 0; min-width: 15rem; color: var(--cracha-tinta, var(--tinta)); background: var(--cor); } /* as linhas em colunas iguais, para os botões ficarem alinhados de cima a baixo */ @media (min-width: 900px) { .evento-cats li { display: grid; grid-template-columns: 15rem 7.5rem 15rem 14rem 1fr; gap: 0.3rem 1rem; } .evento-cats li .evento-cracha--mini { min-width: 0; } .evento-cats li .evento-acao, .evento-cats li .evento-marcar .evento-acao { width: 100%; justify-content: center; } .evento-cats li .evento-ok { grid-column: 3; } } .evento-acao.evento-acao--voltar { color: var(--magenta-700); border-color: var(--magenta-700); } .evento-acao.evento-acao--voltar:hover, .evento-acao.evento-acao--voltar:focus-visible { color: #fff; background: var(--magenta-700); } /* imprimir e depois marcar: os dois passos como botões, na ordem */ .evento-acao { display: inline-flex; align-items: center; font: inherit; font-size: var(--fs-xs); font-weight: 800; padding: 0.35rem 0.7rem; color: var(--indigo-700); background: var(--papel); border: 1px solid var(--indigo-700); text-decoration: none; cursor: pointer; } .evento-acao:hover, .evento-acao:focus-visible { color: #fff; background: var(--indigo-700); } .evento-acao--imprimir { color: #fff; background: var(--indigo-700); } .evento-acao--imprimir:hover, .evento-acao--imprimir:focus-visible { background: var(--indigo-900, #171A4F); } .evento-cats li .evento-marcar { margin: 0; } .evento-ok { font-size: var(--fs-xs); font-weight: 800; color: var(--ok); } /* As inscrições nas atividades, no painel */ .afi-busca { margin: 0 0 0.8rem; } .afi-abas { margin-bottom: 1rem; } .afi-abas .num { margin-left: 0.25rem; font-size: var(--fs-xs); color: var(--cinza); } .afi-dia { margin: 1.6rem 0 0.2rem; padding: 0.6rem 0.9rem; font-size: 1.05rem; font-weight: 800; color: #fff; background: var(--indigo-700); } .afi-turno { margin: 0.9rem 0 0.4rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta-700); } .afi-item { margin-bottom: 0.45rem; background: var(--papel); border: 1px solid var(--borda); } .afi-item[open] { border-color: var(--indigo-700); } .afi-item > summary { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 11rem; gap: 0.2rem 1.5rem; align-items: center; padding: 0.7rem 2.4rem 0.7rem 0.9rem; cursor: pointer; list-style: none; } .afi-item > summary::-webkit-details-marker { display: none; } .afi-item > summary::after { content: ''; position: absolute; right: 0.95rem; top: 50%; width: 0.55rem; height: 0.55rem; margin-top: -0.4rem; border-right: 2px solid var(--indigo-700); border-bottom: 2px solid var(--indigo-700); transform: rotate(45deg); } .afi-item[open] > summary::after { margin-top: -0.1rem; transform: rotate(-135deg); } .afi-t { display: block; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; } .afi-meta { display: block; margin-top: 0.15rem; font-size: var(--fs-xs); color: var(--cinza); } .afi-vagas { display: grid; gap: 0.25rem; font-size: var(--fs-xs); } .afi-vagas b { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .afi-barra { display: block; height: 0.4rem; background: var(--superficie); border: 1px solid var(--borda); } .afi-barra i { display: block; height: 100%; background: var(--indigo-700); } .afi-vagas--lotada b { color: var(--magenta-700); } .afi-vagas--lotada .afi-barra i { background: var(--magenta-700); } .afi-corpo { padding: 0.2rem 0.9rem 0.9rem; border-top: 1px solid var(--borda); } .afi-copiar { margin: 0.6rem 0; font-size: var(--fs-sm); } .afi-nomes { margin: 0; padding: 0; list-style: none; } .afi-nomes li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) 8rem; gap: 0.1rem 0.6rem; align-items: baseline; padding: 0.4rem 0.3rem; border-top: 1px solid var(--borda); font-size: var(--fs-sm); } .afi-nomes .afi-ordem { color: var(--cinza); font-variant-numeric: tabular-nums; } .afi-nomes .afi-email { overflow-wrap: anywhere; color: var(--cinza); } .afi-achado { background: #FFF1D6; } .afi-sit { font-size: var(--fs-xs); font-weight: 700; color: var(--cinza); } .afi-sit--ok { color: #1D6B3F; } .afi-sit--fila { color: var(--magenta-700); } .afi-legenda { margin: 0.5rem 0 0; font-size: var(--fs-xs); color: var(--cinza); } @media (max-width: 40rem) { .afi-item > summary { grid-template-columns: minmax(0, 1fr); } .afi-nomes li { grid-template-columns: 2rem minmax(0, 1fr); } .afi-nomes .afi-email, .afi-nomes .afi-sit { grid-column: 2; } } .workshop-acrescentar-t { margin: 1.4rem 0 0.2rem; font-size: var(--fs-sm); font-weight: 800; } /* As mensagens do proponente aos inscritos */ .afi-mensagens { margin: 1.5rem 0; } .afi-msg-lista { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; } .afm-msg { margin: 0 0 0.8rem; padding: 0.9rem 1rem; background: var(--papel); border: 1px solid var(--borda); border-left: 4px solid var(--indigo-700); overflow-wrap: anywhere; } .afm-msg h2 { margin: 0.15rem 0 0.25rem; font-size: 1.05rem; font-weight: 800; } .afm-msg-quando { margin: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--cinza); } .afm-msg-de { margin: 0 0 0.6rem; font-size: var(--fs-sm); color: var(--cinza); } .afm-msg-texto { font-size: var(--fs-sm); line-height: 1.55; } .afi-msg-lista li { padding: 0.55rem 0.8rem; background: var(--papel); border: 1px solid var(--borda); } .afi-msg-lista summary { cursor: pointer; overflow-wrap: anywhere; } .afi-msg-lista p { margin: 0.5rem 0 0; font-size: var(--fs-sm); overflow-wrap: anywhere; } .afi-msg-t { margin: 1rem 0 0; font-size: var(--fs-sm); font-weight: 800; } /* Os inscritos, para o proponente */ .ins-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; padding: 0; list-style: none; font-size: var(--fs-sm); } .ins-cats li { padding: 0.3rem 0.65rem; background: var(--superficie); border: 1px solid var(--borda); } .ins-cats b { color: var(--indigo-700); font-variant-numeric: tabular-nums; } .ins-pres { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; } .afi-nomes .ins-pres .afi-sit { grid-column: auto; } .ins-nomes-lista { margin-top: 0.5rem; background: var(--papel); border-bottom: 1px solid var(--borda); } #escrever { margin-top: 1.5rem; } .ins-imagem { position: relative; display: block; width: fit-content; max-width: 100%; margin-top: 0.7rem; white-space: normal; } .ins-imagem::after { content: none !important; display: none !important; } .ins-imagem img { display: block; width: auto; max-width: 100%; height: auto; max-height: 20rem; border: 1px solid var(--borda); } .ins-imagem-ampliar { position: absolute; top: 0.5rem; right: 0.5rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: #fff; background: rgb(18 18 43 / 0.72); } .ins-imagem-ampliar svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ins-imagem:hover .ins-imagem-ampliar, .ins-imagem:focus-visible .ins-imagem-ampliar { background: var(--indigo-700); } /* Onde são as apresentações, para quem avalia */ .esc-local { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0.5rem 0 0 !important; font-weight: 700; } .esc-local svg { flex: none; margin-top: 0.1em; } .esc-local small { display: block; margin-top: 0.15rem; font-size: var(--fs-xs); font-weight: 500; } .afi-tirar { display: inline; margin-left: 0.4rem; } .afi-sem-email { display: grid; gap: 0.3rem; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--borda); font-size: var(--fs-sm); } .afi-sem-email label { font-weight: 800; } .afi-sem-email-l { display: flex; flex-wrap: wrap; gap: 0.5rem; } .afi-sem-email input { flex: 1 1 14rem; min-width: 0; padding: 0.55rem 0.7rem; font: inherit; border: 1px solid var(--borda); background: var(--papel); color: var(--tinta); } /* Os cadastros de avaliador: lista que se filtra, e onde falta avaliador */ .aval-atalhos { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin: 0.8rem 0 0; font-size: var(--fs-sm); font-weight: 700; } .aval-filtros { display: grid; gap: 0.5rem; margin: 0.6rem 0; } .aval-filtros[hidden] { display: none; } .aval-filtros input { box-sizing: border-box; width: 100%; padding: 0.55rem 0.7rem; font: inherit; color: var(--tinta); background: var(--papel); border: 1px solid var(--borda); } .aval-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; } .aval-chip { min-height: 2.5rem; padding: 0.3rem 0.75rem; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--indigo-700); background: var(--papel); border: 1px solid var(--borda); cursor: pointer; } .aval-chip b { margin-left: 0.2rem; font-variant-numeric: tabular-nums; } .aval-chip[aria-pressed="true"] { color: #fff; background: var(--indigo-700); border-color: var(--indigo-700); } .aval-recado { position: sticky; top: 0.5rem; z-index: 3; display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin: 0.5rem 0; padding: 0.55rem 0.8rem; font-size: var(--fs-sm); font-weight: 700; background: #E2F1E8; border: 1px solid #1D6B3F; } .aval-recado[hidden] { display: none; } .aval-cad { align-items: center; } .aval-cad[hidden] { display: none; } /* a lista passa de 200 nomes: rola aqui dentro, sem empurrar o resto da página */ .aval-cad-lista { max-height: min(70vh, 38rem); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--borda); padding-inline: 0.9rem; } .aval-cad-lista .aval-cad:last-child { border-bottom: 0; } .aval-cad-c { flex: 1 1 20rem; min-width: 0; } .aval-cad-mais { margin-top: 0.15rem; font-size: var(--fs-xs); } .aval-cad-mais summary { cursor: pointer; color: var(--indigo-700); font-weight: 700; } .aval-secao { margin-top: 1.4rem; border-top: 1px solid var(--borda); } .aval-secao > summary { cursor: pointer; } .aval-secao > summary h2 { display: inline; } .aval-falta { margin-top: 0.5rem; } .aval-falta-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; } .aval-falta-cel { min-width: 8.5rem; padding: 0; text-align: center; border: 1px solid var(--borda); } .aval-falta-cel--leve { background: #F8E3EF; } .aval-falta-cel--media { background: #B83A88; border-color: #B83A88; } .aval-falta-cel--forte { background: #7E0F54; border-color: #7E0F54; } .aval-falta-cel a { display: block; padding: 0.35rem 0.4rem; color: var(--tinta); text-decoration: none; } .aval-falta-cel a:hover, .aval-falta-cel a:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 1px; } .aval-falta-cel strong { display: block; font-size: 0.95rem; line-height: 1.2; } .aval-falta-cel small { display: block; font-size: var(--fs-xs); line-height: 1.25; } .aval-falta-cel--media a, .aval-falta-cel--forte a { color: #fff; } .aval-falta-cel--ok { background: #E2F1E8; border-color: #1D6B3F; } .aval-falta-cel--ok strong { color: #1D6B3F; } .aval-falta-t { margin: 1rem 0 0.3rem; font-size: var(--fs-sm); font-weight: 800; } .aval-falta-areas { display: grid; gap: 0.4rem; margin: 0 0 1.2rem; padding: 0; list-style: none; font-size: var(--fs-sm); } .aval-falta-areas li { display: grid; grid-template-columns: minmax(5rem, 10rem) minmax(0, 1fr) 9.5rem; align-items: center; gap: 0.6rem; } .aval-falta-barra { display: block; height: 0.7rem; background: color-mix(in srgb, var(--magenta-700) 30%, var(--papel)); } .aval-falta-barra i { display: block; height: 100%; background: #1D6B3F; } /* Etiquetas: novos a partir de uma data, e o que falta imprimir */ .evento-recorte { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 1rem; margin: 0 0 0.8rem; padding: 0.7rem 0.8rem; background: var(--superficie); font-size: var(--fs-sm); } .evento-recorte label { display: grid; gap: 0.2rem; font-weight: 700; } .evento-recorte label.opcao { display: flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; } .evento-recorte input[type="datetime-local"] { padding: 0.5rem 0.6rem; font: inherit; font-weight: 400; color: var(--tinta); background: var(--papel); border: 1px solid var(--borda); } .evento-desfazer { margin: 0 0 0.8rem; font-size: var(--fs-sm); } .evento-cracha--mini small { display: block; font-size: 0.72rem; font-weight: 700; text-transform: none; } .evento-cats-n { display: grid; flex: 0 0 8rem; line-height: 1.15; } .evento-cats li a[target], .evento-cats li > a { white-space: nowrap; } .evento-cats-n small { font-size: var(--fs-xs); color: var(--cinza); } .evento-marcar { display: inline; margin: 0; } /* As equipes inscritas, na casa da equipe do circuito */ .circ-eq-t { margin: 0.9rem 0 0.3rem; font-size: var(--fs-sm); font-weight: 800; } .circ-eq-lista { margin: 0; padding: 0; list-style: none; } .circ-eq-pessoas { display: grid; gap: 0.3rem; margin: 0.4rem 0; padding: 0; list-style: none; font-size: var(--fs-sm); } .jph-abas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1.2rem 0 1.4rem; } .jph-aba { display: grid; align-content: start; gap: 0.15rem; min-height: 2.75rem; padding: 0.75rem 1rem; color: var(--tinta); text-decoration: none; background: var(--superficie); border: 2px solid var(--borda); } .jph-aba strong { font-size: 1.05rem; font-weight: 800; color: var(--indigo-700); } .jph-aba span { font-size: var(--fs-sm); color: var(--cinza); } .jph-aba:hover { border-color: var(--indigo-700); } .jph-aba:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 2px; } .jph-aba--atual, .jph-aba--atual:hover { background: var(--indigo-700); border-color: var(--indigo-700); } .jph-aba--atual strong, .jph-aba--atual span { color: #fff; } /* Os acessos por dia, abaixo do título do painel */ .painel-acessos { margin: 0.8rem 0 1rem; } .painel-acessos-t { margin: 0 0 0.4rem; font-size: var(--fs-sm); font-weight: 800; } .painel-acessos-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; margin: 0; padding: 0; list-style: none; } .painel-acessos-dia { display: grid; justify-items: center; gap: 0.1rem; padding: 0.45rem 0.1rem; text-align: center; background: var(--superficie); border: 1px solid var(--borda); font-size: 0.75rem; color: var(--cinza); } .painel-acessos-dia strong { font-size: 1.15rem; line-height: 1.2; color: var(--tinta); } .painel-acessos-dia--hoje { background: var(--indigo-700); border-color: var(--indigo-700); color: #fff; } .painel-acessos-dia--hoje strong { color: #fff; } .painel-acessos-mais { margin-top: 0.5rem; font-size: var(--fs-sm); } .painel-acessos-mais summary { cursor: pointer; font-weight: 700; color: var(--indigo-700); padding-block: 0.3rem; } .painel-acessos-mais .painel-acessos-dias { margin-top: 0.4rem; } /* A conferência da JIEPE em 1 minuto: um bloco por trabalho, uma linha por post. */ .um-min-lista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.9rem; } .um-min-trabalho { padding: 1rem 1.1rem; background: var(--superficie); border: 1px solid var(--borda); } .um-min-trabalho-area { margin: 0; font-size: var(--fs-xs); font-weight: 800; color: var(--indigo-700); } .um-min-trabalho-t { margin: 0.25rem 0 0.7rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; } .um-min-post { padding-top: 0.7rem; border-top: 1px solid var(--borda); } .um-min-post + .um-min-post { margin-top: 0.7rem; } .um-min-post-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; } .um-min-post-tipo { min-width: 3rem; font-size: var(--fs-sm); font-weight: 800; } .um-min-post-abrir { font-size: var(--fs-sm); font-weight: 700; } .um-min-post-troca { margin: 0; font-size: var(--fs-sm); } .um-min-oculto { margin: 0.6rem 0 0; font-size: var(--fs-sm); color: var(--cinza); } .um-min-post-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-left: auto; } .um-min-recusa > summary { list-style: none; cursor: pointer; } .um-min-recusa > summary::-webkit-details-marker { display: none; } .um-min-recusa[open] { flex-basis: 100%; } .um-min-post-acoes:has(.um-min-recusa[open]) { flex-basis: 100%; margin-left: 0; } .um-min-post-acoes .admin-convite-acoes { margin: 0; align-items: center; } .um-min-abas { margin-top: 1rem; } .um-min-reconferir { margin: 0.4rem 0 0; font-size: var(--fs-sm); } .um-min-recusa-form { display: grid; gap: 0.35rem; justify-items: start; margin-top: 0.6rem; } .um-min-recusa-form label { font-size: var(--fs-sm); font-weight: 700; } .um-min-recusa-form textarea { width: 100%; font: inherit; font-size: var(--fs-sm); } .um-min-post-motivo { margin: 0.5rem 0 0; font-size: var(--fs-sm); overflow-wrap: anywhere; } @media (max-width: 560px) { .um-min-post-acoes { margin-left: 0; flex-basis: 100%; } } /* A etiqueta avulsa, no alto da impressão de etiquetas */ .evento-avulsa { margin-top: 0.8rem; display: grid; gap: 0.3rem; } .evento-avulsa label { font-size: var(--fs-sm); font-weight: 700; } .evento-avulsa-linha { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; } .evento-avulsa-linha input { flex: 1 1 16rem; min-width: 0; max-width: 28rem; font: inherit; padding: 0.5rem 0.7rem; border: 1px solid var(--borda); } .evento-avulsa-t { margin: 0.9rem 0 0.3rem; font-size: var(--fs-sm); font-weight: 700; } .evento-avulsa-crachas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; } .evento-avulsa-crachas .evento-cracha--mini { margin: 0; color: var(--tinta); background: var(--cor); } /* Os avaliadores de cada sessão */ .aval-sessao > summary { flex-wrap: wrap; } .aval-sessao > summary .aval-sessao-conta { text-align: right; } .aval-sessao-lista { margin: 0; border-width: 1px 0 0; } .aval-sessao-sem { margin: 0; padding: 0.6rem 0.9rem; font-size: var(--fs-sm); border-top: 1px solid var(--borda); overflow-wrap: anywhere; } .wrap.admin h2.perfil-sub + .aval-sessao { margin-top: 0.7rem; } /* As áreas na grade: as cores passaram pelo validador de paleta (daltonismo e contraste); os números ficam na tabela «Por dia» */ /* só nas marcas coloridas da grade (): a etiqueta da área na programação usa a mesma classe em , só com contorno, e com fundo ficava texto azul sobre azul */ i.agenda-area--pesquisa { background: #4650D2; } i.agenda-area--ensino { background: #D48806; } i.agenda-area--extensao { background: #1BAA9B; } i.agenda-area--monitoria_inclusiva { background: #A6156F; } .agenda-areas-resumo { margin: 0.4rem 0 0; } .agenda-areas-resumo b { font-weight: 800; } .agenda-areas-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0.6rem 0; padding: 0; font-size: var(--fs-sm); } .agenda-areas-legenda li { display: inline-flex; align-items: center; gap: 0.4rem; } .agenda-areas-legenda i, .agenda-areas-dias tbody th i { display: inline-block; flex: none; width: 0.85rem; height: 0.85rem; border-radius: 2px; } .agenda-areas-dias tbody th i { margin-right: 0.45rem; vertical-align: -0.05rem; } .agenda-areas-cel { background: var(--papel); } .agenda-areas-barra { display: flex; gap: 2px; height: 1rem; margin-bottom: 0.25rem; } .agenda-areas-barra i { display: block; flex-basis: 0; min-width: 4px; border-radius: 2px; } .agenda-areas-dias tbody th { white-space: nowrap; } /* A busca de pessoa em «Incluir pessoa do Hub» */ .aval-pessoa { display: grid; gap: 0.3rem; align-content: start; min-width: 0; } .aval-pessoa .aval-pessoa-estado:empty { display: none; } .aval-pessoa-lista { list-style: none; margin: 0; padding: 0; max-height: 20rem; overflow-y: auto; background: var(--papel); border: 1px solid var(--borda); } .aval-pessoa-lista li + li { border-top: 1px solid var(--borda); } .aval-pessoa-lista button { display: grid; gap: 0.1rem; width: 100%; min-height: 2.75rem; padding: 0.5rem 0.7rem; font: inherit; font-size: var(--fs-sm); text-align: left; background: none; border: 0; cursor: pointer; overflow-wrap: anywhere; } .aval-pessoa-lista button:hover:not(:disabled), .aval-pessoa-lista button:focus-visible { background: var(--superficie); } .aval-pessoa-lista button span { font-size: var(--fs-xs); color: var(--cinza); } .aval-pessoa-lista button:disabled { cursor: default; color: var(--cinza); } .aval-conv-campos:has(.aval-pessoa) { align-items: start; } /* a quantidade por área em cada sessão */ .agenda-areas-cel { min-width: 11rem; } .agenda-areas-cel strong { margin-bottom: 0.25rem; font-size: var(--fs-sm); } .agenda-areas-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.15rem; } .agenda-areas-num { display: grid; justify-items: center; gap: 0.05rem; font-variant-numeric: tabular-nums; } .agenda-areas-num i { display: block; width: 0.55rem; height: 0.55rem; border-radius: 2px; } .agenda-areas-num small { font-size: 0.68rem; opacity: 1; color: var(--cinza); } .agenda-areas-num b { font-size: var(--fs-sm); font-weight: 800; } .agenda-areas-num--zero b { font-weight: 400; color: var(--cinza); } .agenda-areas-num--zero i { opacity: 0.25; } /* As pessoas e os links de um momento fixo da programação */ .prog-pessoas, .prog-links { margin: 1rem 0; padding: 0; border: 0; min-width: 0; } .prog-pessoas legend, .prog-links legend { padding: 0; font-weight: 700; } .prog-pessoa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 0.5rem 0.8rem; margin-top: 0.6rem; padding: 0.8rem; background: var(--superficie); border: 1px solid var(--borda); } .prog-pessoa[hidden] { display: none; } .prog-pessoa-t { grid-column: 1 / -1; margin: 0; font-size: var(--fs-xs); font-weight: 800; color: var(--indigo-700); } .prog-pessoa-largo { grid-column: 1 / -1; } .prog-pessoa label, .prog-link label { display: grid; gap: 0.2rem; min-width: 0; font-size: var(--fs-sm); font-weight: 700; } .prog-pessoa input:not([type=checkbox]), .prog-pessoa textarea, .prog-link input { width: 100%; min-width: 0; font: inherit; font-weight: 400; } .prog-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0.5rem 0.8rem; margin-top: 0.5rem; } #prog-mais-pessoa { margin-top: 0.6rem; } @media (max-width: 640px) { .prog-pessoa, .prog-link { grid-template-columns: minmax(0, 1fr); } } .prog-pessoa label > span small, .prog-link label > span small { font-weight: 400; } /* O caminho até a Unidade III, em vídeo */ .caminho-video { margin: 0.5rem 0 0; font-size: var(--fs-sm); } .caminho-video > summary { display: flex; align-items: center; min-height: 2.75rem; cursor: pointer; font-weight: 700; color: var(--indigo-700); } .caminho-video video { display: block; width: 100%; max-width: 20rem; height: auto; aspect-ratio: 9 / 16; background: var(--indigo-900); } .caminho-video p { margin: 0.5rem 0 0; max-width: 60ch; } .esc-hub-acoes { align-self: center; } .esc-topo .caminho-video > summary { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* ---------- A avaliação no dia (05/11/2026): pensada para o celular ---------- */ .avd-ajuda { margin: 0.4rem 0 1rem; padding: 0.8rem 1rem; background: var(--superficie); border: 1px solid var(--borda); } .avd-ajuda summary { cursor: pointer; font-weight: 800; color: var(--indigo-700); } .avd-ajuda ol { margin: 0.6rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; font-size: var(--fs-sm); line-height: 1.5; } .avd-dias { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.4rem; margin: 0.8rem 0 1.2rem; } .avd-dia { display: grid; gap: 0.05rem; padding: 0.6rem 0.8rem; text-decoration: none; color: var(--indigo-700); background: var(--papel); border: 2px solid var(--borda); } .avd-dia b { font-size: 1rem; } .avd-dia span { font-size: var(--fs-sm); color: var(--cinza); } .avd-dia small { font-size: var(--fs-xs); font-weight: 800; color: var(--magenta-700); } .avd-dia small.avd-dia-conta { font-weight: 600; color: var(--indigo-700); } .avd-dia--atual small.avd-dia-conta { color: #fff; } .avd-total { margin: 0 0 0.6rem; font-size: var(--fs-sm); color: var(--cinza); } .avd-total b { color: var(--indigo-700); } .avd-dia--atual { color: #fff; background: var(--indigo-700); border-color: var(--indigo-700); } .avd-dia--atual span, .avd-dia--atual small { color: #fff; } .avd-sessao { margin-bottom: 0.7rem; background: var(--papel); border: 1px solid var(--borda); } .avd-sessao[open] { border-color: var(--indigo-700); } .avd-sessao-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; padding: 0.85rem 1rem; cursor: pointer; list-style: none; } .avd-sessao-cab::-webkit-details-marker { display: none; } .avd-hora { font-size: 1.25rem; font-weight: 800; } .avd-local { flex: 1 1 100%; font-size: var(--fs-sm); color: var(--cinza); } .avd-conta { flex: 1 1 100%; font-size: var(--fs-sm); } .avd-conta b { color: var(--magenta-700); } .avd-agora, .avd-proxima, .avd-passou { padding: 0.15rem 0.5rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.06em; } .avd-agora { color: #fff; background: var(--magenta-700); } .avd-proxima { color: var(--indigo-700); border: 1px solid var(--indigo-700); } .avd-passou { color: var(--cinza); border: 1px solid var(--borda); } .avd-lista { list-style: none; margin: 0; padding: 0 1rem 0.6rem; } .avd-poster { display: grid; gap: 0.3rem; padding: 0.9rem 0 0.9rem 0.8rem; border-top: 1px solid var(--borda); border-left: 4px solid var(--ok); overflow-wrap: anywhere; } .avd-poster--sem { border-left-color: var(--magenta-700); background: #FBEFF5; } .avd-poster p { margin: 0; } .avd-poster-n { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 1.15rem; font-weight: 800; } .avd-area { padding: 0.05rem 0.45rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--indigo-700); border: 1px solid currentColor; } .avd-titulo { font-size: 1.05rem; font-weight: 800; line-height: 1.35; color: var(--tinta); } .avd-categoria { color: var(--cinza); } .avd-linha { font-size: var(--fs-sm); } .avd-linha > span:first-child { display: inline-block; min-width: 5.5rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cinza); } .avd-falta b { color: var(--magenta-700); } .avd-feita { margin-left: 0.4rem; padding: 0.05rem 0.45rem; font-size: var(--fs-xs); font-weight: 800; color: #fff; background: var(--ok); } .avd-avaliador { display: grid; gap: 0.4rem; } .avd-zap { justify-self: start; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 0.9rem; font-weight: 800; font-size: var(--fs-sm); color: #fff; background: #1D8A4E; text-decoration: none; } .avd-troca summary { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 0.9rem; cursor: pointer; font-weight: 800; font-size: var(--fs-sm); color: var(--indigo-700); border: 2px solid var(--indigo-700); list-style: none; } .avd-troca summary::-webkit-details-marker { display: none; } .avd-troca[open] summary { color: #fff; background: var(--indigo-700); } .avd-troca-form { display: grid; gap: 0.4rem; margin-top: 0.6rem; } .avd-troca-form label { font-size: var(--fs-sm); font-weight: 700; } .avd-troca-form input { font: inherit; font-size: 1rem; padding: 0.7rem 0.8rem; border: 2px solid var(--borda); background: #fff; min-width: 0; } .avd-troca-form input:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 1px; } .avd-troca-form .btn { justify-self: start; min-height: 2.75rem; } .avd-tirar { margin-top: 0.5rem; } @media (min-width: 760px) { .avd-local, .avd-conta { flex: 0 1 auto; } .avd-troca-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } .avd-troca-form label { grid-column: 1 / -1; } } /* A avaliação no dia, o que se faz na hora (08/11/2026): imprimir, incluir avaliador, as fichas que faltam, quem chegou, não apresentou, lançar a ficha, a vaga guardada aos externos e o limite por sessão */ .avd-acoes { margin: 0 0 0.8rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .avd-acoes .btn { min-height: 2.75rem; } .avd-incluir, .avd-faltam { margin: 0 0 1rem; padding: 0.2rem 1rem 0.8rem; background: var(--papel); border: 2px solid var(--borda); } .avd-incluir > summary, .avd-faltam > summary { min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; font-weight: 800; color: var(--indigo-700); } .avd-faltam { border-color: var(--magenta-700); } .avd-faltam > summary { color: var(--magenta-700); } .avd-incluir-form { display: grid; gap: 0.45rem; max-width: 34rem; } .avd-incluir-form label { font-size: var(--fs-sm); font-weight: 700; } .avd-incluir-form label small { display: block; font-weight: 500; color: var(--cinza); } .avd-incluir-form input[type="search"], .avd-incluir-form input[type="email"], .avd-incluir-form input[type="tel"], .avd-incluir-form input:not([type]) { font: inherit; font-size: 1rem; padding: 0.7rem 0.8rem; border: 2px solid var(--borda); background: #fff; min-width: 0; width: 100%; } .avd-incluir-form .btn { justify-self: start; min-height: 2.75rem; margin-top: 0.3rem; } .avd-incluir-cat { margin: 0.3rem 0; padding: 0; border: 0; display: grid; gap: 0.2rem; } .avd-incluir-cat legend { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 0.2rem; } .avd-incluir-cat label { display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; font-weight: 500; } .avd-incluir-cat input { width: 1.2rem; height: 1.2rem; } .avd-incluir-lista { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.3rem; } .avd-incluir-opcao { width: 100%; display: grid; gap: 0.1rem; text-align: left; padding: 0.6rem 0.8rem; font: inherit; background: #fff; border: 2px solid var(--borda); cursor: pointer; } .avd-incluir-opcao:hover, .avd-incluir-opcao:focus-visible { border-color: var(--indigo-700); } .avd-incluir-opcao small { color: var(--cinza); } .avd-incluir-vazio { font-size: var(--fs-sm); color: var(--cinza); } .avd-faltam-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .avd-faltam-lista p { margin: 0 0 0.3rem; font-size: var(--fs-sm); } .avd-gestos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .avd-gestos form { margin: 0; } .avd-chegou { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 0.9rem; font: inherit; font-weight: 800; font-size: var(--fs-sm); color: var(--indigo-700); background: #fff; border: 2px solid var(--indigo-700); cursor: pointer; } .avd-chegou--sim { color: #fff; background: var(--ok); border-color: var(--ok); } span.avd-chegou { min-height: 0; padding: 0.05rem 0.45rem; font-size: var(--fs-xs); cursor: default; } .avd-lancar { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.4rem 0.9rem; font-weight: 800; font-size: var(--fs-sm); color: var(--magenta-700); border: 2px solid var(--magenta-700); text-decoration: none; } .avd-lancada { margin-left: 0.4rem; padding: 0.05rem 0.45rem; font-size: var(--fs-xs); font-weight: 700; color: var(--indigo-700); border: 1px solid currentColor; } .avd-faltou { padding: 0.05rem 0.45rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--magenta-700); } .avd-poster--faltou { opacity: 0.75; } .avd-poster--faltou .avd-titulo { text-decoration: line-through; text-decoration-thickness: 1px; } .avd-naoapr { margin-top: 0.4rem; } .avd-alem { display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; font-size: var(--fs-sm); font-weight: 500 !important; } .avd-troca-form .avd-alem input { width: 1.2rem; height: 1.2rem; padding: 0; flex: none; } .avd-guardadas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.6rem 0; padding: 0.6rem 0.8rem; font-size: var(--fs-sm); background: #EAF6EE; border-left: 4px solid #1D8A4E; } .avd-guardadas p { margin: 0; flex: 1 1 16rem; } .avd-guardadas form { margin: 0; } .avd-guardadas .btn { min-height: 2.75rem; } .esc-naoapr { display: grid; gap: 0.6rem; } .esc-naoapr p { margin: 0; } .esc-naoapr-form { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--borda); display: grid; justify-items: start; gap: 0.4rem; } .esc-naoapr-form p { margin: 0; } @media (min-width: 760px) { .avd-troca-form .avd-alem { grid-column: 1 / -1; } } /* A mensagem livre da comissão à autoria (06/11/2026) */ .agenda-mensagem { display: grid; gap: 0.35rem; } .agenda-mensagem label { font-weight: 800; font-size: var(--fs-sm); } .agenda-mensagem input, .agenda-mensagem textarea { font: inherit; font-weight: 400; box-sizing: border-box; width: 100%; min-width: 0; padding: 0.55rem 0.75rem; border: 1.5px solid #C9C5DD; border-radius: 10px; background: #fff; color: var(--tinta); } .agenda-mensagem button { justify-self: start; margin-top: 0.3rem; } .agenda-mensagens { margin: 1.2rem 0; padding: 1rem 1.1rem; border: 2px solid var(--indigo-700); border-radius: 14px; background: #F3F2FB; } .agenda-mensagens-t { margin: 0; font-weight: 800; font-size: 1.1rem; color: var(--indigo-700); } .agenda-mensagens-item { padding-top: 0.7rem; margin-top: 0.7rem; border-top: 1px solid var(--borda); } .agenda-mensagens-item p { margin: 0; } .agenda-mensagens-item span { font-size: var(--fs-sm); color: var(--cinza); margin-left: 0.3rem; } .agenda-mensagens-texto { margin-top: 0.35rem !important; white-space: pre-line; overflow-wrap: anywhere; } /* O resultado do repasse de pôsteres, no bloco do avaliador (06/11/2026) */ .esc-quem { scroll-margin-top: 1rem; } .esc-passou { margin: 0; padding: 0.9rem 1rem; border-top: 1px solid var(--borda); border-left: 4px solid var(--indigo-700); background: #EEF0FB; } .esc-passou p, .esc-passou ul { margin: 0; } .esc-passou-ok { font-size: 1rem; } .esc-passou-t { margin-top: 0.6rem !important; font-weight: 800; font-size: var(--fs-sm); } .esc-passou ul { padding-left: 1.2rem; font-size: var(--fs-sm); } .esc-passou li { margin-top: 0.2rem; overflow-wrap: anywhere; } /* Avaliação no dia (06/11/2026): o mapa de calor do dia, as abas e «Por avaliador» */ .avd-mapa { margin: 0 0 1rem; } .avd-mapa-t { margin: 0 0 0.5rem; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cinza); } .avd-mapa-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 0.35rem; margin: 0; padding: 0; list-style: none; } .avd-mapa-cel { display: grid; gap: 0.05rem; min-height: 3.6rem; padding: 0.45rem 0.4rem; text-align: center; align-content: center; text-decoration: none; color: var(--tinta); border: 1px solid var(--borda); background: var(--papel); } .avd-mapa-cel b { font-size: 1rem; line-height: 1.1; font-variant-numeric: tabular-nums; } .avd-mapa-cel span { font-size: var(--fs-xs); font-weight: 700; line-height: 1.2; } .avd-mapa-cel small { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .avd-mapa-cel--ok { background: #E2F1E8; border-color: #1D6B3F; } .avd-mapa-cel--leve { background: #F8E3EF; border-color: #E7B5D2; } .avd-mapa-cel--media { background: #B83A88; border-color: #B83A88; color: #fff; } .avd-mapa-cel--forte { background: #7E0F54; border-color: #7E0F54; color: #fff; } .avd-mapa-cel--agora { outline: 3px solid var(--indigo-700); outline-offset: 1px; } .avd-mapa-cel:focus-visible { outline: 3px solid var(--indigo-700); outline-offset: 2px; } .avd-mapa-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0.5rem 0 0; font-size: var(--fs-xs); color: var(--cinza); } .avd-mapa-ponto { display: inline-block; width: 0.85rem; height: 0.85rem; margin-left: 0.3rem; border: 1px solid var(--borda); vertical-align: -0.1rem; } .avd-ver { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 1rem; border: 2px solid var(--indigo-700); } .avd-ver-aba { display: grid; place-items: center; min-height: 2.9rem; padding: 0.4rem; text-align: center; line-height: 1.2; font-weight: 800; text-decoration: none; color: var(--indigo-700); background: var(--papel); } .avd-ver-aba--atual { color: #fff; background: var(--indigo-700); } .avd-busca { display: grid; gap: 0.35rem; margin: 0 0 0.9rem; } .avd-busca label, .avd-passar label { font-size: var(--fs-sm); font-weight: 800; } .avd-busca input, .avd-passar input { font: inherit; font-size: 1rem; box-sizing: border-box; width: 100%; min-width: 0; min-height: 3rem; padding: 0.6rem 0.8rem; border: 2px solid var(--borda); background: #fff; color: var(--tinta); } .avd-busca input:focus-visible, .avd-passar input:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 1px; border-color: var(--indigo-700); } .avd-busca-nada { margin: 0; font-size: var(--fs-sm); color: var(--cinza); } .avd-pessoa { margin-bottom: 0.7rem; background: var(--papel); border: 1px solid var(--borda); scroll-margin-top: 1rem; } .avd-pessoa[open] { border-color: var(--indigo-700); } .avd-pessoa-cab { display: grid; gap: 0.15rem; padding: 0.85rem 1rem; cursor: pointer; list-style: none; overflow-wrap: anywhere; } .avd-pessoa-cab::-webkit-details-marker { display: none; } .avd-pessoa-cab b { font-size: 1.1rem; } .avd-pessoa-cab span { font-size: var(--fs-sm); color: var(--cinza); } .avd-pessoa-zap { margin: 0; padding: 0 1rem 0.6rem; } .avd-pessoa-lista { list-style: none; margin: 0; padding: 0; } .avd-pessoa-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; padding: 0.8rem 1rem; border-top: 1px solid var(--borda); cursor: pointer; } .avd-pessoa-item input { width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; accent-color: var(--indigo-700); } .avd-pessoa-info { display: grid; gap: 0.2rem; min-width: 0; grid-column: 2; } .avd-pessoa-item:not(:has(input)) .avd-pessoa-info { grid-column: 1 / -1; } .avd-pessoa-quando { font-size: var(--fs-sm); font-weight: 800; color: var(--indigo-700); } .avd-pessoa-titulo { font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; } .avd-pessoa-quem { font-size: var(--fs-sm); color: var(--cinza); } .avd-passar { display: grid; gap: 0.5rem; padding: 0.9rem 1rem 1rem; border-top: 1px solid var(--borda); background: #F3F2FB; } .avd-passar-botoes { display: grid; gap: 0.5rem; } .avd-passar-botoes .btn { width: 100%; min-height: 3rem; justify-content: center; text-align: center; } .avd-passar-nota { margin: 0; font-size: var(--fs-xs); color: var(--cinza); line-height: 1.45; } .avd-passar-erro { margin: 0; padding: 0.6rem 0.8rem; font-size: var(--fs-sm); font-weight: 700; color: var(--magenta-700); background: #FBEFF5; border-left: 4px solid var(--magenta-700); } @media (min-width: 40rem) { .avd-passar-botoes { grid-template-columns: auto auto; justify-content: start; } .avd-passar-botoes .btn { width: auto; } .avd-passar input { max-width: 34rem; } } .avd-pessoa-codigo { font-weight: 600; color: var(--cinza); } .avd-pessoa-area { justify-self: start; margin: 0.15rem 0; padding: 0.15rem 0.55rem; font-size: 0.8rem; font-weight: 800; border-width: 2px; } /* O avaliador externo do CNPq em destaque, com borda verde (06/11/2026) */ .avd-pessoa.avd-pessoa--externo, .esc-quem.avd-pessoa--externo { border: 3px solid var(--ok); } .avd-poster.avd-poster--externo { border-left-color: var(--ok); box-shadow: inset 0 0 0 2px var(--ok); padding-right: 0.6rem; } .avd-externo { display: inline-block; justify-self: start; width: fit-content; margin: 0.15rem 0.3rem 0.15rem 0; padding: 0.1rem 0.5rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--ok); } /* JIEPE em 1 minuto: a situação do trabalho no alto e o «vale um só» (06/11/2026) */ .um-min-situacao { display: grid; gap: 0.4rem; margin: 0 0 1.4rem; padding: 1rem 1.2rem; border: 2px solid var(--indigo-700); border-left-width: 6px; background: #F3F2FB; } .um-min-situacao p { margin: 0; } .um-min-situacao-t { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--indigo-700); } .um-min-situacao--ok { border-color: var(--ok); background: #E9F4EE; } .um-min-situacao--ok .um-min-situacao-t { color: var(--ok); } .um-min-situacao--nao { border-color: var(--magenta-700); background: #FBEFF5; } .um-min-situacao--nao .um-min-situacao-t { color: var(--magenta-700); } .um-min-situacao-pontos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; } .um-min-situacao-pontos b { font-size: 2.2rem; line-height: 1; font-weight: 800; color: var(--ok); } .um-min-situacao-pontos span { font-weight: 700; } .um-min-situacao-nota { font-size: var(--fs-sm); color: var(--cinza); } .um-min-um-so { margin: 0.4rem 0 0.6rem; padding: 0.7rem 0.9rem; border-left: 4px solid var(--indigo-700); background: #F3F2FB; } /* a etiqueta do externo dentro dos cabeçalhos de cartão, que pintam todo span de cinza (06/11/2026) */ .avd-pessoa-cab .avd-externo, .esc-quem summary .avd-externo, .avd-linha .avd-externo { color: #fff; } /* A lista de presença das atividades (07/11/2026): no celular, na porta da sala. Um toque marca. */ .pres-janela { margin: 1rem 0; padding: 0.8rem 1rem; border-left: 4px solid var(--borda); background: var(--superficie); } .pres-janela p { margin: 0 0 0.4rem; } .pres-janela p:last-child { margin-bottom: 0; } .pres-janela--aberta { border-left-color: #1D6B3F; } .pres-total { margin: 1rem 0 0.6rem; font-size: var(--fs-sm); color: var(--cinza); } .pres-total b { font-size: 1.4rem; color: var(--tinta); font-variant-numeric: tabular-nums; } .pres-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; } .pres-lista form { margin: 0; } .pres-pessoa { width: 100%; display: flex; align-items: center; gap: 0.8rem; min-height: 3.2rem; padding: 0.6rem 0.9rem; font: inherit; text-align: left; color: var(--tinta); background: var(--papel); border: 1px solid var(--borda); cursor: pointer; } .pres-pessoa:disabled { cursor: default; opacity: 0.7; } .pres-marca { flex: none; width: 1.6rem; height: 1.6rem; border: 2px solid var(--cinza-fraco); background: #fff; display: grid; place-items: center; } .pres-pessoa[aria-pressed="true"] { border-color: #1D6B3F; background: #EAF5EE; } .pres-pessoa[aria-pressed="true"] .pres-marca { border-color: #1D6B3F; background: #1D6B3F; } .pres-pessoa[aria-pressed="true"] .pres-marca::after { content: ""; width: 0.45rem; height: 0.85rem; margin-top: -0.15rem; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); } .pres-outros { font-size: var(--fs-xs); font-weight: 700; color: #1D6B3F; background: #EAF5EE; padding: 0.1rem 0.45rem; white-space: nowrap; } .pres-nome { flex: 1; font-weight: 700; overflow-wrap: anywhere; } .pres-fila { flex: none; padding: 0.1rem 0.45rem; font-size: var(--fs-xs); font-weight: 800; color: #fff; background: #8A5200; } .pres-hub { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.4rem; } .pres-hub a { display: grid; gap: 0.15rem; padding: 0.7rem 0.9rem; background: var(--papel); border: 1px solid var(--borda); color: var(--tinta); text-decoration: none; } .pres-hub a:hover { border-color: var(--indigo-700); } .pres-hub span { font-size: var(--fs-sm); color: var(--cinza); } .pres-chamada, .monitoria-oficina-presenca { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin: 1rem 0; } .pres-adm { margin: 0.5rem 0; border: 1px solid var(--borda); background: var(--papel); } .pres-adm > summary { display: grid; gap: 0.15rem; padding: 0.8rem 1rem; cursor: pointer; } .pres-adm > *:not(summary) { margin-inline: 1rem; } .pres-adm-hora { font-size: var(--fs-xs); font-weight: 800; color: var(--indigo-700); } .pres-sit { margin-left: 0.4rem; padding: 0.05rem 0.45rem; font-weight: 700; color: var(--cinza); border: 1px solid var(--borda); } .pres-sit--aberta { color: #fff; background: #1a7f45; border-color: #1a7f45; } .pres-sit--fechada { color: var(--tinta); background: var(--superficie); } .pres-adm-quem { font-size: var(--fs-xs); color: var(--cinza); } .pres-contatos { display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem; align-items: center; margin-bottom: 0.7rem; } .pres-atualiza { margin: 0.3rem 0 0.6rem; } .pres-adm-n { font-size: var(--fs-sm); color: var(--cinza); } .pres-adm-alerta { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; font-size: var(--fs-xs); font-weight: 800; color: #fff; background: var(--magenta-700); } .pres-tabela td:nth-child(n+2), .pres-tabela th:nth-child(n+2) { text-align: center; } .pres-diverge td { background: #FDEAF4; } .pres-rolagem { overflow-x: auto; } .pres-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .pres-tabela th, .pres-tabela td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; } .pres-tabela th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cinza); } .pres-tabela small { color: var(--cinza); overflow-wrap: anywhere; } /* O QR de presença (07/11/2026): no celular do monitor, em tela cheia; e o que o participante vê ao ler. */ .pres-hub--claro { margin-top: 1.2rem; } .pres-qr { text-align: center; } .pres-qr-t { margin: 0.4rem 0; font-size: clamp(1.3rem, 5vw, 1.8rem); line-height: 1.2; } .pres-qr-instrucao { margin: 0 0 1rem; font-size: 1.1rem; } .pres-qr-caixa { max-width: 26rem; margin: 0 auto; padding: 1rem; background: #fff; border: 1px solid var(--borda); } .pres-qr-codigo svg { display: block; width: 100%; height: auto; } .pres-qr-fechado { margin: 2rem 0; color: var(--cinza); } .pres-qr-tempo { height: 6px; margin-top: 0.8rem; background: var(--superficie); } .pres-qr-tempo span { display: block; height: 100%; width: 100%; background: var(--indigo-700); } .pres-qr-ultimos { list-style: none; margin: 0 auto; padding: 0; max-width: 26rem; text-align: left; font-size: var(--fs-sm); color: var(--cinza); } .pres-qr-ultimos li { padding: 0.3rem 0; border-bottom: 1px solid var(--borda); } .pres-lida { margin: 1.5rem 0; padding: 1.4rem 1.2rem; text-align: center; border: 2px solid var(--borda); background: var(--papel); } .pres-lida--ok { border-color: #1D6B3F; background: #EAF5EE; } .pres-lida--nao { border-color: #8A5200; background: #FFF4E5; } .pres-lida-sinal { margin: 0; font-size: 3rem; line-height: 1; font-weight: 800; } .pres-lida--ok .pres-lida-sinal { color: #1D6B3F; } .pres-lida--nao .pres-lida-sinal { color: #8A5200; } .pres-lida-t { margin: 0.5rem 0; font-size: 1.5rem; line-height: 1.25; } .pres-lida-onde { margin: 0; font-weight: 700; } .pres-lida-detalhe { margin: 0.8rem 0 0; font-size: 1.05rem; } .pres-minhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .pres-minha { padding: 0.8rem 1rem; border: 1px solid var(--borda); background: var(--papel); } .pres-minha p, .pres-minha ul { margin: 0.25rem 0; } .pres-minha-t span { display: block; font-size: var(--fs-sm); color: var(--cinza); } .pres-minha--aviso { border-left: 4px solid #8A5200; } .pres-minha-alerta { padding: 0.4rem 0.6rem; background: #FFF4E5; font-weight: 700; } .jph-qr { margin: 1rem 0; border: 1px solid var(--borda); background: var(--papel); } .jph-qr > summary { display: grid; gap: 0.1rem; padding: 0.8rem 1rem; cursor: pointer; } .jph-qr > summary span { font-size: var(--fs-sm); color: var(--cinza); } .jph-qr > *:not(summary) { margin-inline: 1rem; } .jph-qr-lista { list-style: none; padding: 0; margin: 0.6rem 1rem 1rem; display: grid; gap: 0.35rem; } .jph-qr-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--borda); } .jph-qr-lista form { margin: 0; } .jph-qr-nome { flex: 1 1 12rem; font-weight: 700; } .jph-qr-botao { font: inherit; font-size: var(--fs-sm); font-weight: 700; padding: 0.35rem 0.8rem; border: 1px solid var(--borda); background: #fff; color: var(--tinta); cursor: pointer; } .jph-qr-botao--ligado { border-color: #1D6B3F; background: #EAF5EE; color: #1D6B3F; } .pres-hub-link { margin: 1rem 0 0; font-weight: 700; } /* A equipe QR Code Uberaba (07/11/2026). */ .qr-itens { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.35rem; } .qr-itens li { display: grid; padding: 0.55rem 0.8rem; background: var(--superficie); } .qr-itens span, .qr-itens small { font-size: var(--fs-sm); color: var(--cinza); } .qr-acrescenta { margin: 1rem 0 1.4rem; display: grid; gap: 0.35rem; } .qr-acrescenta label { font-weight: 700; } .qr-acrescenta div { display: flex; flex-wrap: wrap; gap: 0.5rem; } .qr-acrescenta select { flex: 1 1 16rem; min-width: 0; padding: 0.55rem; font: inherit; } .qr-membros { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .qr-membro { padding: 0.8rem 1rem; border: 1px solid var(--borda); background: var(--papel); } .qr-membro-t { margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; } .qr-membro-t a { font-size: var(--fs-sm); } .qr-membro-itens { display: flex; flex-wrap: wrap; gap: 0.4rem; } .qr-membro-itens form { margin: 0; } .qr-membro-sai { margin: 0.6rem 0 0; } .qrl-escolha select { flex: 1 1 18rem; min-width: 0; max-width: 100%; font: inherit; padding: 0.45rem 0.6rem; } .qrl-escolha label { font-weight: 700; } .qrl-t { margin: 0.6rem 0 0.4rem; font-size: 1.15rem; } .qrl-lista { list-style: none; margin: 0.6rem 0; padding: 0; } .qrl-p { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 0.3rem 1rem; align-items: start; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--borda); border-left: 4px solid var(--borda); } .qrl-p--dentro { border-left-color: #1a7f45; } .qrl-p--sem_saida { border-left-color: var(--magenta-700); } .qrl-quem, .qrl-horas, .qrl-conta { display: grid; gap: 0.1rem; min-width: 0; } .qrl-quem small, .qrl-conta small { color: var(--cinza); font-size: var(--fs-xs); overflow-wrap: anywhere; } .qrl-horas { font-size: var(--fs-sm); } .qrl-conta { text-align: right; } .qrl-sit { font-size: var(--fs-xs); font-weight: 800; } .qrl-p--dentro .qrl-sit { color: #1a7f45; } .qrl-p--sem_saida .qrl-sit { color: var(--magenta-700); } @media (max-width: 640px) { .qrl-p { grid-template-columns: minmax(0, 1fr); } .qrl-conta { text-align: left; } } .qr-item { margin: 0.8rem 0; padding: 0.9rem 1rem; border: 1px solid var(--borda); background: var(--papel); } .qr-item-t { margin: 0; font-size: 1.15rem; } .qr-item-d { margin: 0.15rem 0 0.6rem; font-size: var(--fs-sm); color: var(--cinza); } .qr-item-vazio { margin: 0 0 0.6rem; font-size: var(--fs-sm); color: #8A5200; font-weight: 700; } .qr-item-lista { list-style: none; margin: 0 0 0.6rem; padding: 0; } .qr-item-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem; padding: 0.35rem 0; border-bottom: 1px solid var(--borda); } .qr-item-lista form { margin: 0 0 0 auto; } .qr-item-nome { font-weight: 700; } .qr-item-lista a { font-size: var(--fs-sm); } .qr-item .qr-acrescenta { margin: 0.4rem 0 0; } .qr-item--passou { opacity: 0.6; background: var(--superficie); } .qr-item-tag { margin-left: 0.4rem; padding: 0.05rem 0.45rem; font-size: var(--fs-xs); font-weight: 800; vertical-align: middle; color: #fff; background: var(--cinza); } .qr-item-vazio--passou { color: var(--cinza); } .pres-hub-item { display: grid; gap: 0.15rem; padding: 0.6rem 0.9rem; background: var(--papel); border: 1px solid var(--borda); color: var(--tinta); } .pres-hub-item span { font-size: var(--fs-sm); color: var(--cinza); } .pres-leitor-camera { position: relative; max-width: 26rem; margin: 1rem auto; aspect-ratio: 1; overflow: hidden; background: #000; } .pres-leitor-camera video { width: 100%; height: 100%; object-fit: cover; display: block; } .pres-leitor-mira { position: absolute; inset: 15%; border: 3px solid #fff; box-shadow: 0 0 0 999px rgba(0,0,0,.35); } .pres-leitor-status { text-align: center; font-weight: 700; } .pres-hub-ler { margin-top: 0.8rem; } .qr-busca input[type="search"] { width: 100%; box-sizing: border-box; min-height: 3rem; padding: 0.6rem 0.8rem; font: inherit; font-size: 16px; border: 1px solid var(--cinza-fraco); background: #fff; } .qr-busca-lista { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.3rem; } .qr-busca-opcao { width: 100%; display: grid; gap: 0.1rem; min-height: 3rem; padding: 0.55rem 0.8rem; text-align: left; font: inherit; color: var(--tinta); background: #fff; border: 1px solid var(--borda); cursor: pointer; } .qr-busca-opcao:hover, .qr-busca-opcao:focus-visible { border-color: var(--indigo-700); } .qr-busca-opcao small { font-size: var(--fs-sm); color: var(--cinza); } .qr-busca-vazio { padding: 0.4rem 0.2rem; font-size: var(--fs-sm); color: var(--cinza); } /* a lista e os botões do cartão, no tamanho do dedo (07/11/2026) */ .qr-busca-lista { width: 100%; max-width: none; box-sizing: border-box; } .qr-item-lista li { align-items: center; justify-content: space-between; gap: 0.5rem 0.8rem; padding: 0.5rem 0; } .qr-item-pessoa { display: grid; gap: 0.2rem; min-width: 0; flex: 1 1 12rem; } .qr-item-nome { overflow-wrap: anywhere; } .qr-item-zap { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0 0.1rem; font-size: var(--fs-sm); font-weight: 700; color: #1D6B3F; text-decoration: none; } .qr-item-zap svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; } .qr-item-zap:hover, .qr-item-zap:focus-visible { text-decoration: underline; } .qr-item-lista form { margin: 0; } .qr-item-tirar { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.9rem; font: inherit; font-size: var(--fs-sm); font-weight: 800; color: var(--magenta-700); background: #fff; border: 1px solid var(--magenta-700); cursor: pointer; } .qr-item-tirar span { font-size: 1.25rem; line-height: 1; } .qr-item-tirar:hover, .qr-item-tirar:focus-visible { color: #fff; background: var(--magenta-700); } /* O Início mais calmo (07/11/2026): a conta discreta, a programação numa linha, os avisos da pessoa em linhas compactas e os prazos encerrados recolhidos. Só o avaliador segue em cartão. */ .hub-conta { margin: 0.6rem 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--cinza); overflow-wrap: anywhere; } .hub-conta strong { color: var(--tinta); font-weight: 700; } .hub-conta a { margin-left: 0.25rem; } .hub-programa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.2rem; margin: 1rem 0 0; padding: 0.7rem 0.9rem 0.7rem 1rem; background: var(--superficie); border-left: 4px solid var(--magenta-700); } .hub-programa-t { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 700; color: var(--tinta); } .hub-programa-t svg { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--magenta-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .hub-programa-campi { display: flex; gap: 0.5rem; } /* a seta vai no texto: a do site, automática nos links de nova aba, sai daqui (0,2,1 vence com a classe e o atributo) */ .hub-programa-campi a[target="_blank"]::after { content: none; } .hub-programa-campi a { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 2.75rem; padding: 0 1rem; font-weight: 800; text-decoration: none; color: var(--magenta-700); background: #fff; border: 1px solid var(--magenta-700); } .hub-programa-campi a:hover, .hub-programa-campi a:focus-visible { color: #fff; background: var(--magenta-700); } @media (max-width: 560px) { .hub-programa-campi { width: 100%; } .hub-programa-campi a { flex: 1; } } .hub-presencas { margin: 1rem 0 0; font-weight: 700; } .inicio-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.4rem; margin-top: 1rem; padding: 0.9rem 1.1rem; background: var(--papel); border: 1px solid var(--borda); border-left: 4px solid var(--indigo-700); } .inicio-linha--alerta { border-left-color: #8A5200; background: #FFF8EC; } .inicio-linha-txt { flex: 1 1 22rem; min-width: 0; } .inicio-linha-txt p { margin: 0; } .inicio-linha-e { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cinza); } .inicio-linha-t { margin-top: 0.1rem !important; font-size: 1.1rem; font-weight: 800; line-height: 1.3; color: var(--tinta); } .inicio-linha-d { margin-top: 0.2rem !important; font-size: var(--fs-sm); line-height: 1.5; color: var(--cinza); } .inicio-linha-lista { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--cinza); } .inicio-linha-lista b { color: var(--tinta); } .inicio-linha-b { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.55rem 1.1rem; font-weight: 800; text-align: center; text-decoration: none; color: #fff; background: var(--indigo-700); } .inicio-linha-b:hover, .inicio-linha-b:focus-visible { background: #171A4F; } @media (max-width: 560px) { .inicio-linha-b { width: 100%; } } .hub-encerrados > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; min-height: 2.75rem; cursor: pointer; list-style: none; } .hub-encerrados > summary::-webkit-details-marker { display: none; } .hub-encerrados > summary::before { content: "▸"; color: var(--cinza); } .hub-encerrados[open] > summary::before { content: "▾"; } .hub-encerrados > summary .prazos-t { margin: 0; } .hub-encerrados-n { font-size: var(--fs-sm); color: var(--indigo-700); font-weight: 700; } .pres-lida-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; } @media (max-width: 560px) { .pres-lida-acoes .btn { flex: 1 1 100%; text-align: center; } } /* chegando por #minhas, o título do bloco não fica atrás do topo fixo do Hub (07/11/2026) */ #minhas { scroll-margin-top: 6.5rem; } .monitoria-trancado { margin: 0.6rem 0 0; font-size: var(--fs-sm); color: var(--cinza); } /* o que não pode passar despercebido numa instrução (07/11/2026) */ .inicio-enfase { color: var(--tinta); font-weight: 800; background: #FFF1C2; padding: 0 0.12em 0 0.15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .inicio-apresentacoes li { margin-bottom: 0.4rem; } .inicio-apresentacao--passou { opacity: 0.6; } /* A entrada na semana do evento (07/11/2026): o que se faz no Hub e como registrar a presença. */ .entrada-lista { margin: 0 0 1rem; padding-left: 1.2rem; line-height: 1.55; } .entrada-lista li { margin-bottom: 0.25rem; } .entrada-presenca { margin-top: 1rem; padding: 1.1rem 1.2rem; background: var(--papel); border: 1px solid var(--borda); border-left: 4px solid var(--indigo-700); } .entrada-presenca-t { margin: 0 0 0.6rem; font-size: 1.2rem; } .entrada-presenca-passos { margin: 0 0 0.8rem; padding-left: 1.3rem; line-height: 1.55; } .entrada-presenca-passos li { margin-bottom: 0.4rem; } .entrada-presenca-regras { margin: 0 0 0.6rem; padding-left: 1.1rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--cinza); } .entrada-presenca-regras b { color: var(--tinta); } .entrada-presenca-regras li { margin-bottom: 0.3rem; } .entrada-presenca-nota { margin: 0; font-size: var(--fs-sm); color: var(--cinza); } /* «Dúvidas» na largura toda, embaixo das duas colunas da entrada (07/11/2026): as centrais lado a lado */ .entrada-ajuda--larga { margin-top: 2.5rem; } /* em tela grande: a central do Hub numa linha própria, no alto, e as quatro pró-reitorias em 2×2 */ @media (min-width: 760px) { .entrada-ajuda--larga .contatos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .entrada-ajuda--larga .contato-card--destaque { order: -1; grid-column: 1 / -1; } } /* As crianças do Jiepinho (08/11/2026): o monitor registra cada criança com o responsável, no celular */ .jpc-form { display: grid; gap: 1rem; max-width: 34rem; margin: 0 0 1.6rem; } .jpc-bloco { margin: 0; padding: 0.8rem 1rem 1rem; display: grid; gap: 0.45rem; background: var(--papel); border: 2px solid var(--borda); } .jpc-bloco legend { padding: 0 0.3rem; font-weight: 800; color: var(--indigo-700); } .jpc-bloco label { font-size: var(--fs-sm); font-weight: 700; } .jpc-form input:not([type="hidden"]) { font: inherit; font-size: 1rem; padding: 0.7rem 0.8rem; border: 2px solid var(--borda); background: #fff; min-width: 0; width: 100%; } .jpc-form input:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 1px; } .jpc-busca, .jpc-manual, .jpc-criancas { display: grid; gap: 0.45rem; } .jpc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; } .jpc-opcao { width: 100%; display: grid; gap: 0.1rem; text-align: left; padding: 0.6rem 0.8rem; font: inherit; background: #fff; border: 2px solid var(--borda); cursor: pointer; } .jpc-opcao:hover, .jpc-opcao:focus-visible { border-color: var(--indigo-700); } .jpc-opcao small, .jpc-vazio { font-size: var(--fs-sm); color: var(--cinza); } .jpc-escolhido { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; padding: 0.6rem 0.8rem; font-weight: 700; background: #EAF6EE; border-left: 4px solid #1D8A4E; } .jpc-enviar { justify-self: start; min-height: 2.75rem; } .jpc-bloco .ligacao { justify-self: start; min-height: 2.5rem; } .jpc-t { margin: 0 0 0.6rem; font-size: 1.15rem; } .jpc-filtro { display: grid; gap: 0.3rem; max-width: 34rem; margin: 0 0 0.8rem; } .jpc-filtro label { font-size: var(--fs-sm); font-weight: 700; } .jpc-filtro input { font: inherit; font-size: 1rem; padding: 0.7rem 0.8rem; border: 2px solid var(--borda); background: #fff; } .jpc-registros { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; max-width: 40rem; } .jpc-registros li { padding: 0.7rem 0.9rem; background: #fff; border: 1px solid var(--borda); } .jpc-registros p { margin: 0; } .jpc-crianca { font-weight: 800; font-size: 1.05rem; } .jpc-resp { font-size: var(--fs-sm); overflow-wrap: anywhere; } .jpc-quando { font-size: var(--fs-xs); color: var(--cinza); } .jpc-registros form { margin-top: 0.3rem; } .jpc-busca[hidden], .jpc-manual[hidden], .jpc-escolhido[hidden], .jpc-registros li[hidden] { display: none; } /* Os certificados (08/11/2026): a consulta pública, a página do certificado e «Meus certificados» */ .cert-busca { display: grid; gap: 0.45rem; max-width: 30rem; margin: 0 0 1rem; } .cert-busca label { font-size: var(--fs-sm); font-weight: 700; } .cert-busca input { font: inherit; font-size: 1.05rem; padding: 0.75rem 0.85rem; border: 2px solid var(--borda); background: #fff; letter-spacing: 0.04em; } .cert-busca .btn { justify-self: start; min-height: 2.75rem; } .cert-ficha { max-width: 36rem; padding: 1rem 1.2rem; background: #fff; border: 2px solid var(--ok); } .cert-ok { margin: 0 0 0.6rem; font-weight: 800; color: var(--ok); } .cert-ficha dl { margin: 0 0 1rem; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; } .cert-ficha dt { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cinza); padding-top: 0.15rem; } .cert-ficha dd { margin: 0; overflow-wrap: anywhere; } .cert-ficha .btn, .cert-lista .btn, .cert-prov .btn { min-height: 2.75rem; } .cert-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; max-width: 40rem; } .cert-lista li { display: grid; gap: 0.2rem; justify-items: start; padding: 0.9rem 1rem; background: #fff; border: 1px solid var(--borda); } .cert-lista p { margin: 0; } .cert-lista-t { font-weight: 800; font-size: 1.05rem; } .cert-lista-d { font-size: var(--fs-sm); } .cert-lista-q { font-size: var(--fs-xs); color: var(--cinza); margin-bottom: 0.4rem !important; } .cert-prov { max-width: 40rem; margin: 0 0 1.2rem; padding: 0.9rem 1rem; background: var(--papel); border-left: 4px solid var(--magenta-700); } .cert-prov p { margin: 0 0 0.3rem; } .cert-prov-e { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--magenta-700); } .cert-prov-t { font-weight: 800; font-size: 1.1rem; } .cert-prov-d { font-size: var(--fs-sm); } .cert-prov ul { margin: 0.3rem 0 0.7rem; padding-left: 1.1rem; font-size: var(--fs-sm); } .talento-palco { color: var(--ok); } .talento-palco-form { margin: 0.6rem 0; } .talento-palco-form p { margin: 0; } .talento-palco-form .btn { min-height: 2.75rem; } /* Os certificados em lote, no painel (08/11/2026) */ .certadm-conta { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: var(--fs-sm); } .certadm-bloco { margin: 0 0 1.5rem; padding: 1rem 1.2rem; background: var(--papel); border: 2px solid var(--borda); max-width: 52rem; } .certadm-bloco h2 { margin: 0 0 0.4rem; font-size: 1.2rem; } .certadm-bloco > p { margin: 0 0 0.6rem; } .certadm-bloco .btn { min-height: 2.75rem; } .certadm-filtro { display: grid; gap: 0.3rem; max-width: 30rem; margin: 1rem 0 0.6rem; } .certadm-filtro label { font-size: var(--fs-sm); font-weight: 700; } .certadm-filtro input { font: inherit; font-size: 1rem; padding: 0.7rem 0.8rem; border: 2px solid var(--borda); background: #fff; } .certadm-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; } .certadm-lista li { padding: 0.6rem 0.8rem; background: #fff; border: 1px solid var(--borda); } .certadm-lista li[hidden] { display: none; } .certadm-lista p { margin: 0; } .certadm-email { font-size: var(--fs-sm); color: var(--cinza); overflow-wrap: anywhere; } .certadm-gestos { font-size: var(--fs-sm); } .certadm-ok { color: var(--ok); font-weight: 700; } .certadm-fora { opacity: 0.6; } .certadm-nao { font-weight: 800; color: var(--magenta-700); } .certadm-excluir { margin: 0.2rem 0 0; } .certadm-um { margin: 0.4rem 0 0; } .certadm-um .btn { min-height: 2.5rem; } .talento-previa { margin: 0.6rem 0 0.2rem; font-size: var(--fs-sm); line-height: 1.7; } .talento-previa span { font-weight: 700; margin-right: 0.3rem; } /* O dia do Show na ficha da inscrição (08/11/2026) */ .talento-ausente { color: var(--cinza); } .talento-dia { margin: 0.8rem 0 0.6rem; padding: 0.8rem 1rem; display: grid; gap: 0.45rem; background: #fff; border: 2px solid var(--borda); border-left: 5px solid var(--indigo-700); } .talento-dia--subiu { border-left-color: var(--ok); background: #F1FAF4; } .talento-dia--nao { border-left-color: var(--cinza); background: var(--papel); } .talento-dia p { margin: 0; } .talento-dia-t { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--indigo-700); } .talento-dia-estado { font-weight: 800; font-size: 1.05rem; } .talento-dia--subiu .talento-dia-estado { color: var(--ok); } .talento-dia-estado small { margin-left: 0.4rem; font-weight: 500; font-size: var(--fs-sm); color: var(--cinza); } .talento-dia-d, .talento-dia-nota { font-size: var(--fs-sm); color: var(--cinza); } .talento-dia .talento-previa { margin: 0.1rem 0; } .talento-dia-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-top: 0.2rem; } .talento-dia-botoes form { margin: 0; } .talento-dia-botoes .btn { min-height: 2.75rem; } .talento-corrigir { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin: 0.4rem 0 0.8rem; } .talento-corrigir .btn { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem; } .talento-corrigir .btn svg { width: 1.05em; height: 1.05em; } .talento-corrigir span { font-size: var(--fs-sm); color: var(--cinza); } /* o quadro do dia e o botão de corrigir com o mesmo recuo do texto da ficha */ .talento-dia { margin-inline: 0.95rem; } .talento-corrigir { margin-inline: 0.95rem; margin-bottom: 0.95rem; } @media (max-width: 600px) { .talento-dia-botoes form { flex: 1 1 100%; } .talento-dia-botoes .btn { width: 100%; justify-content: center; } } .jpc-gestos { font-size: var(--fs-sm); margin: 0.3rem 0 0 !important; } .jpc-corrigir { margin-top: 0.3rem; } .jpc-corrigir > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--magenta-700); min-height: 2.25rem; display: inline-flex; align-items: center; } .jpc-corrigir form { display: grid; gap: 0.4rem; margin: 0.4rem 0 0.6rem; max-width: 30rem; } .jpc-corrigir label { font-size: var(--fs-sm); font-weight: 700; } .jpc-corrigir input { font: inherit; font-size: 1rem; padding: 0.65rem 0.8rem; border: 2px solid var(--borda); background: #fff; } .jpc-corrigir .btn { justify-self: start; min-height: 2.75rem; } /* A entrega da caneca (08/11/2026), no celular */ .cnc-conta { margin: 0 0 0.8rem; font-size: 1.05rem; } .cnc-conta b { font-size: 1.3rem; color: var(--indigo-700); } .cnc-busca { display: grid; gap: 0.4rem; max-width: 40rem; margin: 0 0 1rem; } .cnc-busca label { font-weight: 700; } .cnc-busca input { font: inherit; font-size: 1.1rem; padding: 0.8rem 0.9rem; border: 2px solid var(--borda); background: #fff; } .cnc-busca input:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 1px; } .cnc-lista, .cnc-ultimas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .cnc-item { display: grid; gap: 0.5rem; padding: 0.8rem 0.9rem; background: #fff; border: 2px solid var(--borda); } .cnc-item--ja { background: var(--papel); } .cnc-item p, .cnc-ultimas p { margin: 0; } .cnc-nome { font-weight: 800; font-size: 1.1rem; } .cnc-email, .cnc-q { font-size: var(--fs-sm); color: var(--cinza); overflow-wrap: anywhere; } .cnc-trab { font-size: var(--fs-sm); } .cnc-ja { font-weight: 800; color: var(--ok); } .cnc-item form { margin: 0; } .cnc-item .btn { width: 100%; min-height: 3rem; font-size: 1.05rem; } .cnc-vazio { font-size: var(--fs-sm); color: var(--cinza); } .cnc-excecao { max-width: 40rem; margin: 0 0 1.4rem; padding: 0.2rem 1rem 0.8rem; background: var(--papel); border: 2px solid var(--borda); } .cnc-excecao > summary { min-height: 2.75rem; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--magenta-700); } .cnc-excecao form { display: grid; gap: 0.4rem; } .cnc-excecao label { font-size: var(--fs-sm); font-weight: 700; } .cnc-excecao input { font: inherit; font-size: 1rem; padding: 0.7rem 0.8rem; border: 2px solid var(--borda); background: #fff; } .cnc-excecao .btn { justify-self: start; min-height: 2.75rem; } .cnc-t { margin: 0 0 0.6rem; font-size: 1.1rem; } .cnc-ultimas li { padding: 0.6rem 0.8rem; background: #fff; border: 1px solid var(--borda); max-width: 40rem; } .cnc-exc { padding: 0.05rem 0.4rem; font-size: var(--fs-xs); font-weight: 800; color: #fff; background: var(--magenta-700); } .cnc-ultimas form { margin: 0.2rem 0 0; } .cnc-trab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cnc-aviso { position: sticky; top: 0.5rem; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; margin: 0 0 0.8rem; padding: 0.8rem 1rem; max-width: 40rem; font-weight: 800; color: #fff; background: var(--ok); box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,.18); } .cnc-aviso[hidden] { display: none; } .cnc-aviso--erro { background: var(--magenta-700); } .cnc-aviso .ligacao { color: #fff; font-weight: 800; min-height: 2.25rem; } .inicio-caneca { margin: 0.6rem 0 0 !important; padding: 0.5rem 0.75rem; font-size: var(--fs-sm); background: #FFF6E5; border-left: 4px solid #FD9D24; } .inicio-caneca--ok { background: #EAF6EE; border-left-color: var(--ok); color: var(--ok); font-weight: 700; } /* a tarefa do monitor antes da presença marcada (08/11/2026) */ .inicio-trancada { margin: 0.2rem 0 0 !important; padding: 0.4rem 0.7rem; font-size: var(--fs-sm); font-weight: 700; color: #8A4B00; background: #FFF3C4; border-left: 3px solid #FD9D24; } span.inicio-trancada { display: inline; padding: 0.1rem 0.4rem; } .tarefa-trancada { max-width: 36rem; padding: 1rem 1.2rem; background: #FFF3C4; border-left: 5px solid #FD9D24; } .tarefa-trancada p { margin: 0 0 0.4rem; } .tarefa-trancada-t { font-weight: 800; font-size: 1.1rem; color: #8A4B00; } /* Os lembretes por WhatsApp (08/11/2026), no celular */ .wpp-sep { width: 1px; align-self: stretch; background: var(--borda); margin: 0 0.4rem; } .wpp-conta { position: sticky; top: 0; z-index: 20; margin: 0.8rem 0; padding: 0.7rem 0.9rem; background: var(--papel); border: 2px solid var(--borda); } .wpp-conta p { margin: 0 0 0.4rem; } .wpp-conta b { color: var(--indigo-700); font-size: 1.1rem; } .wpp-barra { height: 0.5rem; background: #E4E2F0; } .wpp-barra span { display: block; height: 100%; background: #1D8A4E; transition: width .3s; } .wpp-filtro { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-size: var(--fs-sm); min-height: 2.25rem; } .wpp-filtro input { width: 1.15rem; height: 1.15rem; } .wpp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; max-width: 44rem; } .wpp-item { padding: 0.8rem 0.9rem; background: #fff; border: 2px solid var(--borda); } .wpp-item[hidden] { display: none; } .wpp-item--feito { background: #EEF8F1; border-color: #BFE3CC; } .wpp-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 0.8rem; } .wpp-cab p { margin: 0; } .wpp-nome { font-weight: 800; font-size: 1.05rem; } .wpp-estado { font-size: var(--fs-sm); font-weight: 700; color: #1D8A4E; } .wpp-detalhe { margin: 0.3rem 0 0.4rem; padding-left: 1.1rem; font-size: var(--fs-sm); } .wpp-texto summary { cursor: pointer; font-size: var(--fs-sm); color: var(--indigo-700); min-height: 2rem; display: inline-flex; align-items: center; } .wpp-texto p { margin: 0.3rem 0; padding: 0.6rem 0.8rem; font-size: var(--fs-sm); background: #F3F9F4; border-left: 3px solid #1D8A4E; } .wpp-gestos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.4rem; } .wpp-abrir { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0.5rem 1.2rem; font-weight: 800; color: #fff; background: #1D8A4E; text-decoration: none; } .wpp-item--feito .wpp-abrir { background: #7FB894; } .wpp-sem { font-size: var(--fs-sm); color: var(--magenta-700); font-weight: 700; } @media (max-width: 600px) { .wpp-abrir { flex: 1 1 100%; } } /* A busca de monitores do Hub no «Adicionar monitor» (09/11/2026) */ .mon-lista { margin: -0.4rem 0 0.8rem; } .mon-onde { margin: 0 0 0.8rem; padding: 0.6rem 0.8rem; background: #fff; border-left: 4px solid var(--indigo-700); font-size: var(--fs-sm); } .mon-onde p { margin: 0 0 0.3rem; font-weight: 700; } .mon-onde ul { margin: 0; padding-left: 1.1rem; } .jph-form label.mon-mover { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; margin: 0.6rem 0; } .mon-mover input { width: auto; margin-top: 0.2rem; } /* Os dois campos da JIEPE em 1 minuto (09/11/2026): cartões da mesma altura, com os campos alinhados embaixo */ .um-min-links { align-items: stretch; } .form-resumo.um-min-form { display: flex; flex-direction: column; gap: 0.8rem; padding: 1.2rem; background: #fff; border: 1px solid var(--borda); } .um-min-form-t { margin: 0; font-size: var(--fs-md, 1.1rem); } .um-min-form-estado { margin: 0; padding: 0.5rem 0.7rem; font-size: var(--fs-sm); background: var(--papel); border-left: 4px solid var(--borda); color: var(--cinza); } .um-min-form-estado--ok { border-left-color: var(--ok); color: var(--ok); } .um-min-form-estado--nao { border-left-color: var(--magenta-700); color: var(--tinta); } .um-min-form-campos { display: grid; gap: 0.7rem; } .form-resumo.um-min-form label { margin: 0 0 0.3rem; } .um-min-rede-linha { display: grid; gap: 0.5rem; } .um-min-form-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; } .um-min-form-acao small { font-size: var(--fs-sm); color: var(--cinza); } .um-min-redes { margin: 1.2rem 0 0; max-width: 52rem; padding: 0.7rem 0.9rem; background: #fff; border-left: 4px solid var(--indigo-700); font-size: var(--fs-sm); } .ouvinte-baixar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0 1.2rem; } .apr-baixar { margin: 0; padding: 0.5rem 0.8rem; background: #fff; border: 1px solid var(--borda); font-size: var(--fs-sm); } /* O nome que sai no certificado (09/11/2026), antes de ler o QR e na confirmação */ .nome-cert { max-width: 34rem; margin: 1rem auto; padding: 0.9rem 1.1rem; background: #FFF6D6; border-left: 5px solid #E0A400; text-align: left; } .nome-cert p { margin: 0; } .nome-cert-r { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6B4E00; } .nome-cert-n { margin: 0.2rem 0 0.4rem !important; font-size: 1.35rem; font-weight: 800; color: var(--tinta); } .nome-cert-a { font-size: var(--fs-sm); color: var(--tinta); } .perfil-desligar { display: inline; margin-left: auto; } /* Os certificados emitidos (09/11/2026) */ .certemi-busca { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1rem 0; } .certemi-busca input { flex: 1 1 16rem; padding: 0.6rem 0.8rem; font: inherit; border: 1px solid var(--borda); } .certemi-xlsx { margin-left: auto; } .certemi-grupo { border: 1px solid var(--borda); background: #fff; margin: 0 0 0.6rem; } .certemi-grupo summary { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: baseline; padding: 0.8rem 1rem; cursor: pointer; } .certemi-tipo { font-weight: 800; } .certemi-ativ { color: var(--cinza); } .certemi-n { margin-left: auto; font-size: var(--fs-sm); } .certemi-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .certemi-tabela th, .certemi-tabela td { text-align: left; padding: 0.5rem 0.8rem; border-top: 1px solid var(--borda); vertical-align: top; } .certemi-tabela small { color: var(--cinza); } .certemi-ok { color: var(--ok); } .certemi-fila { color: var(--alerta); font-weight: 700; } .certemi-acoes { white-space: nowrap; } .certemi-acoes form { display: inline; margin-left: 0.6rem; } .certemi-ordem { color: inherit; text-decoration: underline dotted; } .certemi-ordem--atual { text-decoration: none; color: var(--indigo-700); } .ins-sala { margin: 0.4rem 0; display: grid; gap: 0.3rem; } .ins-sala small { color: var(--cinza); font-size: var(--fs-sm); } .afg-janela-sala input { width: 100%; } /* O botão da sala online (09/11/2026): verde, com um pulso suave para chamar o olho */ .sala-online, .btn.sala-online, .inicio-linha-b.sala-online { background: #1D8A4E; border-color: #1D8A4E; color: #fff; animation: sala-pulso 1.8s ease-out infinite; } .sala-online:hover, .sala-online:focus-visible { background: #166B3C; border-color: #166B3C; color: #fff; } @keyframes sala-pulso { 0% { box-shadow: 0 0 0 0 rgba(29, 138, 78, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(29, 138, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(29, 138, 78, 0); } } @media (prefers-reduced-motion: reduce) { .sala-online { animation: none; } } .certemi-form { display: grid; gap: 0.7rem; padding: 0 1rem 1rem; } .certemi-form label { display: grid; gap: 0.3rem; font-weight: 700; font-size: var(--fs-sm); } .certemi-form label small { font-weight: 400; color: var(--cinza); } .certemi-form select, .certemi-form input { font: inherit; padding: 0.6rem 0.8rem; border: 1px solid var(--borda); } .aval-por-sessao label { display: inline-flex; gap: 0.4rem; align-items: center; font-size: var(--fs-sm); color: var(--cinza); } .aval-por-sessao select { font: inherit; padding: 0.2rem 0.4rem; } /* A ficha do avaliador (09/11/2026): o número do pôster em destaque e a autoria */ .esc-topo .ficha-num { display: inline-block; margin: 0.4rem 0 0.2rem !important; padding: 0.25rem 0.9rem; background: #fff; color: var(--indigo-900) !important; font-weight: 800; font-size: 1.5rem; border-radius: 999px; } .esc-topo .ficha-autores { margin: 0.5rem 0 0.2rem !important; font-size: 1rem; line-height: 1.5; color: #DCDDF5; } .ficha-autor--apresenta { color: #fff; font-weight: 800; background: rgba(245, 95, 180, 0.28); padding: 0.05rem 0.4rem; border-radius: 4px; } .ficha-autor { white-space: nowrap; } .ficha-autor small { font-size: 0.72em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #F9B6DA; margin-left: 0.2rem; } /* o ranking das notas dos pôsteres (10/11/2026) */ .rank-rolagem { overflow-x: auto; margin: 0.6rem 0 1rem; border: 1px solid var(--borda); background: var(--papel); } .rank-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .rank-tabela th, .rank-tabela td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--borda); text-align: left; vertical-align: top; } .rank-tabela th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--cinza); white-space: nowrap; } .rank-tabela th small { display: block; font-weight: 400; text-transform: none; } .rank-tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .rank-pos { font-weight: 800; white-space: nowrap; } .rank-pos small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--cinza); } .rank-trab { min-width: 18rem; } .rank-trab small { display: block; color: var(--cinza); font-size: var(--fs-xs); } .rank-topo { background: color-mix(in srgb, var(--magenta-700) 6%, transparent); } .rank-final { font-weight: 800; color: var(--magenta-700); } .rank-ind { display: inline-block; margin-left: 0.3rem; padding: 0 0.4rem; font-weight: 700; color: #fff; background: var(--indigo-700); } .rank-aval { margin-top: 1rem; } .rank-aval > summary { cursor: pointer; font-weight: 700; } /* a classificação redesenhada (10/11/2026): pódio, lista em linhas e a nota em destaque */ .cls-prelim { display: inline-block; margin-right: 0.4rem; padding: 0.05rem 0.5rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #8A5200; background: #FFF1D6; border: 1px solid #F0C27A; } .cls-filtros { display: grid; gap: 0.2rem; margin: 0.6rem 0 0.4rem; } .cls-filtros .admin-abas { margin: 0; } .cls-podios { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin: 1rem 0 1.4rem; } .cls-podio { padding: 1rem 1.1rem 0.6rem; background: var(--papel); border: 1px solid var(--borda); border-top: 4px solid var(--indigo-700); } .cls-podio h2 { margin: 0 0 0.6rem; font-size: 1.05rem; color: var(--indigo-900); } .cls-podio ol { list-style: none; margin: 0; padding: 0; } .cls-podio li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; padding: 0.55rem 0; border-top: 1px solid var(--borda); } .cls-podio li:first-child { border-top: 0; } .cls-med { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; font-size: var(--fs-sm); font-weight: 800; color: #fff; background: #8C8FA8; } .cls-podio-1 .cls-med { background: #B8860B; } .cls-podio-2 .cls-med { background: #7D8597; } .cls-podio-3 .cls-med { background: #A0522D; } .cls-podio-t { display: grid; gap: 0.1rem; min-width: 0; } .cls-podio-t b { font-size: var(--fs-sm); line-height: 1.3; } .cls-podio-t small { font-size: var(--fs-xs); color: var(--cinza); overflow-wrap: anywhere; } .cls-podio-n { font-size: 1.25rem; font-weight: 800; color: var(--magenta-700); font-variant-numeric: tabular-nums; } .cls-barra { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; margin: 0.4rem 0 0.6rem; } .cls-busca { flex: 1 1 28rem; margin: 0; } .cls-lista { list-style: none; margin: 0 0 1.2rem; padding: 0; border: 1px solid var(--borda); background: var(--papel); } .cls-item { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 13rem; gap: 0.4rem 1rem; align-items: start; padding: 0.8rem 1rem; border-top: 1px solid var(--borda); } .cls-item:first-child { border-top: 0; } .cls-item--topo { background: color-mix(in srgb, var(--magenta-700) 5%, transparent); } .cls-pos { font-size: 1.15rem; font-weight: 800; color: var(--indigo-700); font-variant-numeric: tabular-nums; } .cls-trab { display: grid; gap: 0.15rem; min-width: 0; } .cls-titulo { line-height: 1.35; } .cls-meta { font-size: var(--fs-xs); color: var(--cinza); overflow-wrap: anywhere; } .cls-crits { display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; margin-top: 0.25rem; font-size: var(--fs-xs); color: var(--cinza); } .cls-crits > span { padding: 0.05rem 0.4rem; background: var(--superficie); border: 1px solid var(--borda); } .cls-crits b { color: var(--tinta); font-variant-numeric: tabular-nums; } .cls-crits .cls-tag { font-weight: 700; color: #8A5200; background: #FFF1D6; border-color: #F0C27A; } .cls-crits .cls-tag--ind { color: #fff; background: var(--indigo-700); border-color: var(--indigo-700); } .cls-nota { display: grid; gap: 0.25rem; justify-items: end; text-align: right; } .cls-final { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--magenta-700); font-variant-numeric: tabular-nums; } .cls-trilho { display: block; width: 100%; height: 6px; background: var(--superficie); border: 1px solid var(--borda); } .cls-trilho i { display: block; height: 100%; background: var(--magenta-700); } .cls-conta { font-size: var(--fs-xs); color: var(--cinza); font-variant-numeric: tabular-nums; } .cls-mais { margin: 0.8rem 0; padding: 0.7rem 1rem; background: var(--papel); border: 1px solid var(--borda); } .cls-mais > summary { cursor: pointer; font-weight: 700; } .cls-regra { margin: 0.6rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; font-size: var(--fs-sm); line-height: 1.5; } .cls-faltam { list-style: none; margin: 0.6rem 0 0; padding: 0; font-size: var(--fs-sm); } .cls-faltam li { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; padding: 0.35rem 0; border-top: 1px solid var(--borda); } @media (max-width: 640px) { .cls-item { grid-template-columns: 2.6rem minmax(0, 1fr); } .cls-nota { grid-column: 2; justify-items: start; text-align: left; } } /* cancelar a atividade, na janela «editar» da grade (10/11/2026) */ .afg-cancelar { margin-top: 0.6rem; } .afg-cancelar > summary { cursor: pointer; display: inline; } .afg-cancelar form { display: grid; gap: 0.4rem; margin-top: 0.6rem; padding: 0.8rem; border: 1px solid var(--magenta-700); background: var(--papel); } .afg-cancelar textarea { font: inherit; padding: 0.45rem 0.6rem; } .afg-cancelar-avisar { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--fs-sm); } .afg-cancelada { display: inline-block; margin-left: 0.4rem; padding: 0 0.4rem; font-size: var(--fs-xs); font-weight: 700; color: #fff; background: var(--magenta-700); } /* a linha do cadastro de avaliador (10/11/2026): marcas pequenas ao lado do nome, as ações do dia sempre no mesmo lugar e o raro no menu «⋯» */ .aval-cad-topo { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; } .aval-cad-marcas { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; } .aval-cad-marcas .aval-adm-estado { margin-left: 0; font-size: 0.7rem; padding: 0.05rem 0.4rem; } .aval-cad-acoes { display: flex; gap: 0.6rem; align-items: center; justify-content: flex-end; flex: 0 0 auto; } .aval-slot { margin: 0; display: grid; gap: 0.15rem; font-size: var(--fs-xs); color: var(--cinza); } .aval-slot--sessao { width: 9.5rem; } .aval-slot--cnpq { width: 9.5rem; } .aval-slot--cnpq form { display: grid; gap: 0.15rem; margin: 0; } .aval-slot--aceitar { width: auto; } .aval-slot label { display: grid; gap: 0.15rem; } .aval-slot select { font: inherit; font-size: var(--fs-sm); color: var(--tinta); padding: 0.35rem 0.4rem; background: var(--papel); border: 1px solid var(--borda); } .aval-chave { display: inline-flex; gap: 0.45rem; align-items: center; padding: 0.3rem 0.55rem 0.3rem 0.35rem; font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--tinta); background: var(--papel); border: 1px solid var(--borda); cursor: pointer; } .aval-chave i { position: relative; width: 2rem; height: 1.1rem; border-radius: 999px; background: #C7C9DB; transition: background .15s; } .aval-chave i::after { content: ''; position: absolute; top: 2px; left: 2px; width: calc(1.1rem - 4px); height: calc(1.1rem - 4px); border-radius: 50%; background: #fff; transition: transform .15s; } .aval-chave[aria-checked="true"] i { background: var(--indigo-700); } .aval-chave[aria-checked="true"] i::after { transform: translateX(0.9rem); } .aval-chave:focus-visible { outline: 2px solid var(--indigo-700); outline-offset: 2px; } .aval-chave-fixa { padding: 0.35rem 0; font-size: var(--fs-sm); font-weight: 700; color: var(--tinta); } .aval-menu { position: relative; } .aval-menu > summary { list-style: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--tinta); border: 1px solid var(--borda); background: var(--papel); } .aval-menu > summary::-webkit-details-marker { display: none; } .aval-menu[open] > summary { background: var(--superficie); } .aval-menu-caixa { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: grid; gap: 0.7rem; width: 17rem; padding: 0.8rem; background: var(--papel); border: 1px solid var(--borda); box-shadow: 0 10px 28px -14px rgba(23, 26, 79, .45); } .aval-menu-recusa { display: grid; gap: 0.35rem; margin: 0; font-size: var(--fs-sm); } .aval-menu-recusa textarea { font: inherit; font-size: var(--fs-sm); padding: 0.4rem; } .aval-menu-caixa form { margin: 0; } @media (prefers-reduced-motion: reduce) { .aval-chave i, .aval-chave i::after { transition: none; } } @media (max-width: 760px) { .aval-cad-acoes { width: 100%; justify-content: flex-start; flex-wrap: wrap; } .aval-menu-caixa { right: auto; left: 0; } } /* a atividade cancelada, no Início (10/11/2026) */ .inicio-linha--cancelada { border-left: 4px solid var(--magenta-700); background: color-mix(in srgb, var(--magenta-700) 6%, var(--papel)); } .inicio-linha--cancelada .inicio-linha-e { color: var(--magenta-700); } /* a condução das atividades, em Certificados (10/11/2026; redesenhada no mesmo dia) */ .cond-topo { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: center; justify-content: space-between; margin: 0.6rem 0; } .cond-campi { margin: 0; } .cond-progresso { flex: 1 1 18rem; max-width: 26rem; display: grid; gap: 0.3rem; } .cond-progresso p { margin: 0; font-size: var(--fs-sm); color: var(--cinza); } .cond-progresso b { color: var(--tinta); } .cond-trilho { display: block; height: 8px; background: var(--superficie); border: 1px solid var(--borda); } .cond-trilho i { display: block; height: 100%; background: #1D6B3F; } .cond-como { margin-top: 0.4rem; } .cond-barra { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; margin: 0.8rem 0 0.4rem; } .cond-barra .admin-abas { margin: 0; } .cond-busca { flex: 1 1 20rem; margin: 0; } .cond-lote { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; margin: 0.8rem 0; padding: 0.8rem 1rem; background: #EEF6F1; border: 1px solid #B8D9C5; border-left: 4px solid #1D6B3F; } .cond-lote p { margin: 0; flex: 1 1 22rem; font-size: var(--fs-sm); } .cond-prop { margin: 1.3rem 0 0.4rem; } .cond-prop-t { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; align-items: baseline; margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--indigo-900); } .cond-prop-n { font-size: var(--fs-xs); font-weight: 700; color: var(--cinza); } .cond-prop-n--ok { color: #1D6B3F; } .cond-atv { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) auto; gap: 0.6rem 1.2rem; align-items: center; margin: 0 0 -1px; padding: 0.75rem 1rem; background: var(--papel); border: 1px solid var(--borda); border-left: 4px solid #C9A227; } .cond-atv--confirmada { border-left-color: #1D6B3F; } .cond-atv--futura { border-left-color: var(--borda); } .cond-atv-info { display: grid; gap: 0.15rem; min-width: 0; } .cond-atv-t { line-height: 1.3; } .cond-atv-info small { font-size: var(--fs-xs); color: var(--cinza); overflow-wrap: anywhere; } .cond-quem { color: #1D6B3F !important; font-weight: 700; } .cond-sit { justify-self: start; padding: 0.05rem 0.45rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .cond-sit--pronta { color: #6B4E00; background: #FFF1C2; } .cond-sit--futura { color: var(--cinza); background: var(--superficie); } .cond-sit--confirmada { color: #fff; background: #1D6B3F; } .cond-pessoas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; } .cond-pessoas li { display: grid; gap: 0.1rem; } .cond-pessoa { display: inline-flex; gap: 0.45rem; align-items: center; padding: 0.35rem 0.6rem; border: 1px solid var(--borda); background: var(--papel); cursor: pointer; } .cond-pessoa:has(input:checked) { border-color: var(--indigo-700); background: color-mix(in srgb, var(--indigo-700) 7%, var(--papel)); } .cond-pessoa:has(input:not(:checked)) b { text-decoration: line-through; color: var(--cinza); } .cond-pessoa input { width: 1.05rem; height: 1.05rem; margin: 0; } .cond-pessoa > span { display: grid; line-height: 1.25; } .cond-pessoa b { font-size: var(--fs-sm); } .cond-pessoa small { font-size: 0.7rem; color: var(--cinza); } .cond-pessoa--sem { cursor: default; border-style: dashed; } .cond-pessoa--sem small { color: var(--magenta-700); } .cond-cert { font-size: 0.7rem; font-weight: 700; color: #1D6B3F; padding-left: 0.2rem; } .cond-botao { white-space: nowrap; } @media (max-width: 860px) { .cond-atv { grid-template-columns: minmax(0, 1fr); } .cond-botao { justify-self: start; } } /* o registro à mão, em Entradas e saídas (10/11/2026) */ .qrl-manual { margin: 0.6rem 0 1rem; padding: 0.7rem 1rem; background: var(--papel); border: 1px solid var(--borda); border-left: 4px solid var(--indigo-700); } .qrl-manual > summary { cursor: pointer; font-weight: 800; } .qrl-manual > summary small { font-weight: 400; color: var(--cinza); margin-left: 0.4rem; } .qrl-manual-form { display: grid; gap: 0.5rem; margin-top: 0.7rem; max-width: 36rem; } .qrl-manual-pessoa { display: grid; gap: 0.25rem; font-weight: 700; } .qrl-manual-pessoa small { font-weight: 400; color: var(--cinza); } .qrl-manual-pessoa input { font: inherit; padding: 0.45rem 0.6rem; } .qrl-manual-horas { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; } .qrl-manual-horas label { display: grid; gap: 0.2rem; font-weight: 700; } .qrl-manual-horas input { font: inherit; padding: 0.35rem 0.5rem; } .qrl-manual-form .btn { justify-self: start; } .qrl-mao { display: flex; gap: 0.3rem; align-items: baseline; justify-content: flex-end; margin: 0; } /* entradas e saídas no padrão da condução (10/11/2026) */ .qrl-escolha { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; margin: 0.8rem 0 0.2rem; } .qrl-escolha label { font-weight: 800; } .qrl-escolha select { flex: 1 1 22rem; min-width: 0; max-width: 46rem; font: inherit; padding: 0.5rem 0.6rem; background: var(--papel); border: 1px solid var(--borda); } .qrl-agora { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: #1a7f45; vertical-align: middle; } .cond-busca select { font: inherit; padding: 0.45rem 0.5rem; background: var(--papel); border: 1px solid var(--borda); } .cond-topo-t { margin: 0; font-weight: 800; color: var(--indigo-900); } .certemi-emitir { margin: 0.6rem 0 0.4rem; } .certemi-tipos { flex-wrap: wrap; } /* conferência de resumos no padrão da condução (10/11/2026) */ .certadm .certadm-bloco { margin: 0.4rem 0 1.5rem; padding: 0; background: none; border: 0; max-width: none; } .certadm-panorama { list-style: none; margin: 0.6rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; } .certadm-panorama a { display: inline-flex; gap: 0.35rem; align-items: baseline; padding: 0.3rem 0.65rem; font-size: var(--fs-sm); color: var(--tinta); text-decoration: none; background: var(--papel); border: 1px solid var(--borda); } .certadm-panorama a:hover { border-color: var(--indigo-700); } .certadm-panorama b { color: var(--indigo-700); } .certadm-panorama small { font-size: 0.7rem; color: #8A5200; } .certadm .admin-abas button.admin-aba { font: inherit; background: none; border: 0; cursor: pointer; } .certadm .certadm-lista { gap: 0; border: 1px solid var(--borda); background: var(--papel); } .certadm .certadm-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 1rem; align-items: center; margin: 0 0 -1px; padding: 0.7rem 1rem; background: var(--papel); border: 0; border-bottom: 1px solid var(--borda); border-left: 4px solid #C9A227; } .certadm .certadm-lista li[data-certadm-estado="emitido"] { border-left-color: #1D6B3F; } .certadm .certadm-lista li[data-certadm-estado="fora"] { border-left-color: var(--borda); opacity: 0.75; } .certadm .certadm-quem, .certadm .certadm-email, .certadm .certadm-gestos { grid-column: 1; } .certadm .certadm-email { font-size: var(--fs-xs); color: var(--cinza); } .certadm .certadm-um, .certadm .certadm-excluir { grid-column: 2; justify-self: end; margin: 0; } .certadm .certadm-um { grid-row: 1 / span 2; } .certadm .certadm-um .btn { min-height: 0; padding: 0.4rem 0.8rem; font-size: var(--fs-sm); } @media (max-width: 700px) { .certadm .certadm-lista li { grid-template-columns: minmax(0, 1fr); } .certadm .certadm-um, .certadm .certadm-excluir { grid-column: 1; grid-row: auto; justify-self: start; } } /* o link do convidado na linha do cadastro (10/11/2026) */ .aval-slot--link { width: auto; } .aval-reenviar { min-height: 0 !important; padding: 0.4rem 0.7rem; font-size: var(--fs-sm); white-space: nowrap; } .aval-link-sit b { color: var(--magenta-700); } .aval-link-ok { color: #1D6B3F; font-weight: 700; } .aval-linha-ok { display: block; margin-top: 0.2rem; padding: 0.25rem 0.5rem; font-size: var(--fs-xs); font-weight: 700; color: #1D6B3F; background: #EEF6F1; } .aval-link-novo { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.35rem; padding: 0.5rem; background: #EEF6F1; border: 1px solid #B8D9C5; } .aval-link-novo input { flex: 1 1 18rem; min-width: 0; font: inherit; font-size: var(--fs-xs); padding: 0.35rem 0.5rem; background: #fff; border: 1px solid var(--borda); } .aval-link-novo small { flex-basis: 100%; font-size: 0.7rem; color: var(--cinza); } /* a autoria na classificação (10/11/2026) */ .cls-autores { font-size: var(--fs-xs); color: var(--cinza); line-height: 1.5; } .cls-autor small { display: inline-block; margin-left: 0.25rem; padding: 0 0.3rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; vertical-align: 1px; } .cls-autor--apresenta { font-weight: 800; color: var(--magenta-700); } .cls-autor--apresenta small { color: #fff; background: var(--magenta-700); } .cls-autor--orienta { font-weight: 800; color: var(--indigo-700); } .cls-autor--orienta small { color: #fff; background: var(--indigo-700); } /* a presença nas sessões de pôsteres, em Certificados (10/11/2026) */ .psp-lista { list-style: none; margin: 0.6rem 0 1.2rem; padding: 0; border: 1px solid var(--borda); background: var(--papel); } .psp-p { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 6rem; gap: 0.4rem 1rem; align-items: start; padding: 0.7rem 1rem; border-bottom: 1px solid var(--borda); border-left: 4px solid #1D6B3F; } .psp-p:last-child { border-bottom: 0; } .psp-p--sem { border-left-color: var(--magenta-700); } .psp-p--dentro { border-left-color: #C9A227; } .psp-quem { display: grid; gap: 0.1rem; min-width: 0; } .psp-quem small { font-size: var(--fs-xs); color: var(--cinza); overflow-wrap: anywhere; } .psp-turnos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: var(--fs-sm); } .psp-turnos li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0.6rem; align-items: baseline; } .psp-turno { color: var(--cinza); font-size: var(--fs-xs); } .psp-pares { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; font-variant-numeric: tabular-nums; } .psp-pares em { font-style: normal; font-size: 0.68rem; font-weight: 700; color: var(--indigo-700); } .psp-min { font-variant-numeric: tabular-nums; } .psp-min--sem { color: var(--magenta-700); } .psp-total { display: grid; justify-items: end; text-align: right; } .psp-total b { font-size: 1.25rem; color: #1D6B3F; font-variant-numeric: tabular-nums; } .psp-total small { font-size: var(--fs-xs); color: var(--cinza); } @media (max-width: 760px) { .psp-p { grid-template-columns: minmax(0, 1fr) auto; } .psp-turnos { grid-column: 1 / -1; grid-row: 2; } } /* «Minhas presenças», por tipo (10/11/2026) */ .mp-bloco { margin: 1.4rem 0; } .mp-cab { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: flex-end; justify-content: space-between; margin-bottom: 0.6rem; } .mp-cab h2 { margin: 0; font-size: 1.25rem; color: var(--indigo-900); } .mp-cab p { margin: 0.2rem 0 0; max-width: 60ch; font-size: var(--fs-sm); color: var(--cinza); } .mp-total { margin: 0; display: grid; justify-items: end; text-align: right; } .mp-total b { font-size: 2rem; line-height: 1; color: #1D6B3F; font-variant-numeric: tabular-nums; } .mp-total small { font-size: var(--fs-xs); color: var(--cinza); } .mp-turnos { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borda); background: var(--papel); } .mp-turno { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 0.3rem 1rem; align-items: baseline; padding: 0.7rem 1rem; border-bottom: 1px solid var(--borda); border-left: 4px solid #1D6B3F; } .mp-turno:last-child { border-bottom: 0; } .mp-turno--aviso { border-left-color: var(--magenta-700); } .mp-quando { display: grid; gap: 0.1rem; font-weight: 700; } .mp-quando small { font-weight: 400; font-size: var(--fs-xs); color: var(--cinza); } .mp-pares { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; font-variant-numeric: tabular-nums; } .mp-pares small { flex-basis: 100%; font-size: var(--fs-xs); color: var(--indigo-700); } .mp-conta { font-size: 1.1rem; color: #1D6B3F; font-variant-numeric: tabular-nums; } .mp-turno--aviso .mp-conta { color: var(--magenta-700); } .mp-alerta { grid-column: 1 / -1; margin: 0.2rem 0 0; padding: 0.35rem 0.6rem; font-size: var(--fs-sm); color: var(--magenta-700); background: #FBE4F1; } @media (max-width: 640px) { .mp-turno { grid-template-columns: minmax(0, 1fr) auto; } .mp-pares { grid-column: 1; } .mp-conta { grid-row: 1; grid-column: 2; } } .cls-autor small.cls-autor-ori { color: #fff; background: var(--indigo-700); } /* Emitidos agrupados por tipo, com o campus (10/11/2026) */ .certemi-bloco { margin: 1.2rem 0 0.4rem; } .certemi-bloco-t { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; justify-content: space-between; margin: 0 0 0.4rem; padding-bottom: 0.3rem; font-size: 1.1rem; color: var(--indigo-900); border-bottom: 2px solid var(--indigo-700); } .certemi-bloco-t > span { font-size: var(--fs-sm); font-weight: 400; color: var(--cinza); } .certemi-bloco .certemi-grupo { margin: 0 0 -1px; } .certemi-bloco .certemi-grupo > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.3rem 1rem; align-items: center; } .certemi-ativ { min-width: 0; font-weight: 600; color: var(--tinta); } .certemi-campus { padding: 0.05rem 0.5rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; color: var(--indigo-700); background: color-mix(in srgb, var(--indigo-700) 9%, transparent); white-space: nowrap; } @media (max-width: 700px) { .certemi-bloco .certemi-grupo > summary { grid-template-columns: minmax(0, 1fr); } } .cond-intro { margin: 0.4rem 0 0.2rem; } .cond-semp { justify-self: start; padding: 0.05rem 0.45rem; font-size: 0.72rem; font-weight: 700; color: var(--magenta-700); background: #FBE4F1; } .cond-lote small { color: var(--cinza); } /* A pesquisa de avaliação da JIEPE (11/11/2026, redesenhada no mesmo dia): cabeçalho, progresso, e as notas como botões grandes, com o significado embaixo e a cor ao marcar. */ .pesq-topo { margin: 0.4rem 0 1.2rem; padding: 1.4rem 1.4rem 1.2rem; background: var(--indigo-900); color: #fff; } .pesq-topo h1 { margin: 0.2rem 0 0.4rem; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.1; color: #fff; } .pesq-topo p { margin: 0; color: #DCDAF5; } .pesq-topo-e { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta-400) !important; } .pesq-anonima { margin-top: 0.8rem !important; padding: 0.55rem 0.75rem; background: rgba(255,255,255,0.08); font-size: var(--fs-sm); } .pesq-progresso { position: sticky; top: 0; z-index: 5; height: 1.6rem; margin: 0 0 1rem; background: var(--superficie); border: 1px solid var(--borda); overflow: hidden; } .pesq-progresso span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--indigo-700), var(--magenta-500)); transition: width .25s; } .pesq-progresso small { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 700; color: var(--tinta); } .pesq .form-bloco-t { font-size: 1.15rem; } .pesq fieldset { min-width: 0; } .pesq-q { border: 0; padding: 0.9rem 0 1rem; margin: 0; border-top: 1px solid var(--borda); } .pesq-q:first-of-type { border-top: 0; } .pesq-q legend { float: left; width: 100%; font-weight: 700; margin-bottom: 0.6rem; } .pesq-q legend + * { clear: both; } .pesq-papeis { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } .pesq-notas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; max-width: 34rem; } .pesq-nps { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 0.25rem; max-width: 40rem; } .pesq-nota { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.15rem; margin: 0 !important; padding: 0.55rem 0.15rem 0.5rem; border: 2px solid var(--borda); background: var(--papel); cursor: pointer; text-align: center; } .pesq-nota input { position: absolute; opacity: 0; pointer-events: none; } .pesq .pesq-nota { display: flex; flex-direction: column; } .pesq-nota b { display: block; font-size: 1.25rem; line-height: 1; } .pesq-nota small { display: block; font-size: 0.68rem; line-height: 1.15; color: var(--cinza); font-weight: 600; } .pesq-nota:hover { border-color: var(--indigo-700); } .pesq-nota:has(input:focus-visible) { outline: 3px solid var(--indigo-700); outline-offset: 2px; } .pesq-nota:has(input:checked) { color: #fff; border-color: transparent; } .pesq-nota:has(input:checked) small { color: #fff; } .pesq-nota--1:has(input:checked), .pesq-nps-baixo:has(input:checked) { background: #A6156F; } .pesq-nota--2:has(input:checked) { background: #C8508E; } .pesq-nota--3:has(input:checked), .pesq-nps-meio:has(input:checked) { background: #6E6A8A; } .pesq-nota--4:has(input:checked) { background: #3E8E63; } .pesq-nota--5:has(input:checked), .pesq-nps-alto:has(input:checked) { background: #1D6B3F; } .pesq-nps .pesq-nota { padding: 0.6rem 0; } .pesq-nps .pesq-nota b { font-size: 1.05rem; } .pesq-nps-pontas { display: flex; justify-content: space-between; max-width: 40rem; margin: 0.3rem 0 0; font-size: var(--fs-xs); color: var(--cinza); } .pesq-na { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0 0 !important; font-size: var(--fs-xs); color: var(--cinza); font-weight: 600; cursor: pointer; } .pesq-na:has(input:checked) { color: var(--tinta); } .pesq-q .campo-erro { margin: 0.4rem 0 0; } .pesq [data-pesq-bloco][hidden] { display: none; } .pesq-enviar { min-width: 16rem; font-size: 1.05rem; padding: 0.9rem 1.4rem; } @media (max-width: 30rem) { .pesq-nps { grid-template-columns: repeat(6, minmax(0, 1fr)); } .pesq-nota small { font-size: 0.6rem; } .pesq-enviar { width: 100%; min-width: 0; } } /* O painel das respostas da pesquisa (11/11/2026, redesenhado no mesmo dia). As cores das notas são as da própria pesquisa. */ .pqr-cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.6rem 1rem; } .pqr-links { display: flex; gap: 0.5rem; margin: 0; } .pqr-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.5rem; margin: 0.8rem 0 1.2rem; } .pqr-papel { display: flex; align-items: center; gap: 0.5rem; margin: 0; } .pqr-papel label { margin: 0; font-size: var(--fs-sm); font-weight: 700; } .pqr-papel select { min-width: 16rem; } .pqr-numeros { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem; } .pqr-numeros li { padding: 0.9rem 1rem; background: var(--superficie); border: 1px solid var(--borda); } .pqr-numeros b { display: block; font-size: 2rem; line-height: 1.05; font-variant-numeric: tabular-nums; } .pqr-numeros span { font-size: var(--fs-xs); color: var(--cinza); } .pqr-atencao { margin: 0 0 1.4rem; padding: 0.9rem 1.1rem; border-left: 4px solid var(--magenta-700); background: #FFF0F6; } .pqr-atencao h2 { margin: 0 0 0.5rem; font-size: 1rem; } .pqr-atencao h2 small { font-weight: 400; color: var(--cinza); font-size: var(--fs-xs); } .pqr-atencao ol { margin: 0; padding-left: 1.2rem; } .pqr-atencao li { padding: 0.25rem 0; } .pqr-atencao li > span { margin-right: 0.5rem; } .pqr-atencao small { color: var(--cinza); font-size: var(--fs-xs); } .pqr-legenda { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0 0 0.5rem; font-size: var(--fs-xs); color: var(--cinza); } .pqr-legenda i { display: inline-block; width: 0.8rem; height: 0.8rem; margin-right: 0.3rem; vertical-align: -0.1rem; } .pqr-bloco { margin: 1.2rem 0; } .pqr-linha { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 3.6rem; gap: 0.4rem 1rem; align-items: center; padding: 0.6rem 0; border-top: 1px solid var(--borda); } .pqr-q { margin: 0; font-size: var(--fs-sm); font-weight: 700; } .pqr-q small { display: block; font-weight: 400; color: var(--cinza); font-size: var(--fs-xs); } .pqr-barra { display: flex; height: 1.6rem; background: var(--superficie); overflow: hidden; } .pqr-barra span { display: flex; align-items: center; justify-content: center; min-width: 3px; color: #fff; font-size: 0.7rem; font-weight: 700; white-space: nowrap; overflow: hidden; } .pqr-c1 { background: #A6156F; } .pqr-c2 { background: #C8508E; } .pqr-c3 { background: #6E6A8A; } .pqr-c4 { background: #3E8E63; } .pqr-c5 { background: #1D6B3F; } .pqr-media { justify-self: end; font-size: 1.25rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .pqr-linha .pqr-media:not([class*="tom"]) { font-size: var(--fs-sm); } .pqr-tom--otimo b, b.pqr-tom--otimo { color: #1D6B3F; } .pqr-tom--bom b, b.pqr-tom--bom { color: #3E8E63; } .pqr-tom--medio b, b.pqr-tom--medio { color: #6E6A8A; } .pqr-tom--ruim b, b.pqr-tom--ruim { color: #A6156F; } .pqr-opcoes { padding: 0.6rem 0; border-top: 1px solid var(--borda); } .pqr-opcoes ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.25rem; } .pqr-opcoes li { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 2.5rem; gap: 0.6rem; align-items: center; font-size: var(--fs-sm); } .pqr-opcoes i { display: block; height: 0.9rem; background: var(--indigo-700); min-width: 2px; } .pqr-opcoes b { text-align: right; font-variant-numeric: tabular-nums; } .pqr-textos { padding: 0.6rem 0; border-top: 1px solid var(--borda); } .pqr-textos summary { cursor: pointer; font-weight: 700; font-size: var(--fs-sm); } .pqr-textos summary small { font-weight: 400; color: var(--cinza); font-size: var(--fs-xs); } .pqr-textos ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; } .pqr-textos li { padding: 0.6rem 0.8rem; background: var(--superficie); border-left: 3px solid var(--indigo-700); font-size: var(--fs-sm); white-space: pre-line; } @media (max-width: 40rem) { .pqr-linha { grid-template-columns: minmax(0, 1fr) 3.2rem; } .pqr-barra { grid-column: 1 / -1; grid-row: 2; } .pqr-papel select { min-width: 0; flex: 1; } .pqr-opcoes li { grid-template-columns: 7rem minmax(0, 1fr) 2rem; } } /* a numeração conta só as perguntas à vista: o bloco escondido não soma */ .pesq { counter-reset: pesq; } .pesq-num::before { counter-increment: pesq; content: counter(pesq) ". "; } .cls-apagar { margin: 0.3rem 0 0; font-size: var(--fs-xs); } .cls-apagar summary { cursor: pointer; color: var(--magenta-700); font-weight: 700; } .cls-apagar-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0 1rem; } .cls-apagar-form input { flex: 1 1 16rem; min-width: 0; } /* Avaliação no dia: as trocas do dia (12/11/2026) */ .avd-trocas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .avd-troca-linha { display: grid; gap: 0.25rem; padding: 0.8rem 1rem; background: var(--papel); border: 1px solid var(--borda); border-left: 4px solid var(--indigo-700); overflow-wrap: anywhere; } .avd-troca-linha--sem { border-left-color: var(--magenta-700); } .avd-troca-linha p { margin: 0; } .avd-troca-quando { font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.04em; color: var(--cinza); } .avd-troca-poster { font-size: var(--fs-sm); } .avd-troca-de-para { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; } .avd-troca-de-para s { color: var(--cinza); } .avd-troca-ninguem { color: var(--magenta-700); } .avd-troca-ficha { justify-self: start; padding: 0.15rem 0.5rem; font-size: var(--fs-sm); font-weight: 800; } .avd-troca-ficha--ok { color: #fff; background: var(--ok); } .avd-troca-ficha--nao { color: var(--magenta-700); border: 1px solid currentColor; } .avd-ver-aba + .avd-ver-aba { border-left: 2px solid var(--indigo-700); } .avd-poster--avaliado { border-left-color: var(--ok); } .avd-avaliado { justify-self: start; padding: 0.2rem 0.6rem; font-size: var(--fs-sm); font-weight: 800; color: #fff; background: var(--ok); } /* Canecas: quem ainda falta, por dia de apresentação (12/11/2026) */ .cnc-dias-nota { max-width: 40rem; margin: -0.3rem 0 0.6rem; } .cnc-dias { display: grid; gap: 0.5rem; max-width: 40rem; margin: 0 0 1.4rem; } .cnc-dia { background: #fff; border: 2px solid var(--borda); } .cnc-dia[open] { border-color: var(--indigo-700); } .cnc-dia > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem; min-height: 2.75rem; padding: 0.6rem 0.9rem; cursor: pointer; } .cnc-dia > summary > b { font-size: 1.05rem; color: var(--indigo-700); } .cnc-dia > summary span { font-size: var(--fs-sm); } .cnc-dia-faltam { margin-left: auto; color: var(--magenta-700); font-weight: 700; } .cnc-dia > .campo-nota { padding: 0 0.9rem 0.8rem; margin: 0; } .cnc-faltam { list-style: none; margin: 0; padding: 0 0.9rem 0.6rem; } .cnc-faltam li { display: grid; gap: 0.1rem; padding: 0.5rem 0; border-top: 1px solid var(--borda); overflow-wrap: anywhere; } .cnc-faltam small { font-size: var(--fs-sm); color: var(--cinza); } /* Sessões de pôsteres: lançar a saída de quem não leu o QR ao sair (12/11/2026) */ .psp-saida { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.1rem 0 0.3rem; } .psp-saida input[type="time"] { font: inherit; font-size: var(--fs-sm); padding: 0.3rem 0.5rem; border: 2px solid var(--borda); background: #fff; } .psp-saida .btn { min-height: 2.25rem; padding: 0.3rem 0.8rem; font-size: var(--fs-sm); } /* Classificação: os certificados dos melhores trabalhos (12/11/2026) */ .cls-cert { margin: 0 0 1.4rem; padding: 1rem 1.1rem; background: var(--papel); border: 1px solid var(--borda); border-top: 4px solid var(--indigo-700); } .cls-cert h2 { margin: 0 0 0.6rem; font-size: 1.15rem; } .cls-cert-aviso { margin: 0 0 0.5rem; } .cls-cert-lista { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.4rem; } .cls-cert-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.4rem 0.8rem; align-items: center; padding: 0.6rem 0.8rem; background: #fff; border: 1px solid var(--borda); } .cls-cert-item--geral { border: 2px solid #B8860B; background: #FFF9E8; } .cls-cert-t { display: grid; gap: 0.1rem; min-width: 0; overflow-wrap: anywhere; } .cls-cert-t small { font-size: var(--fs-xs); color: var(--cinza); } .cls-cert-t small:first-child { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--magenta-700); } .cls-cert-acoes { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; } .cls-cert-acoes .btn { min-height: 2.5rem; font-size: var(--fs-sm); } .cls-cert-med-1 { background: #B8860B; } .cls-cert-med-2 { background: #7D8597; } .cls-cert-med-3 { background: #A0522D; } @media (max-width: 640px) { .cls-cert-item { grid-template-columns: auto minmax(0, 1fr); } .cls-cert-acoes { grid-column: 1 / -1; justify-content: flex-start; } } .cls-cert-campi { justify-content: flex-start; margin: 0.4rem 0 0; } /* Classificação: o pódio já fechou? (12/11/2026) */ .cls-fecha { margin: 0 0 0.5rem; padding: 0.3rem 0.6rem; font-size: var(--fs-sm); font-weight: 700; color: #7A4B00; background: #FFF3CD; border-left: 3px solid #E0B84C; } .cls-fecha--ok { color: #fff; background: var(--ok); border-left-color: var(--ok); } .cls-fecha small { display: block; font-weight: 400; font-size: var(--fs-xs); opacity: .85; } .cls-fecha-geral { margin: 0 0 0.8rem; } .cls-cert-final { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.5rem 0; padding: 0.7rem; background: #EAF6EE; border: 1px solid var(--ok); } .cls-cert-final form { margin: 0; } .cls-cert-final .campo-nota { flex-basis: 100%; margin: 0; } /* o trabalho acrescentado sem ficha ao certificado de avaliador (12/11/2026) */ .certadm .certadm-credito { grid-column: 1; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin: .2rem 0 0; font-size: var(--fs-sm); color: var(--magenta-700, #A6156F); } .certadm-acrescentar { display: grid; gap: .6rem; max-width: 36rem; margin-top: .6rem; } .certadm-acrescentar label { display: grid; gap: .2rem; } .certadm-acrescentar .btn { justify-self: start; } /* os certificados dos trabalhos da pessoa, em «Meus certificados» (12/11/2026) */ .cert-sub { margin: 2rem 0 .3rem; font-size: var(--fs-lg, 1.25rem); }