/* ========================================================================= Planeta Cursos — UI Operacional (Fase 3A) CSS local (sem CDN externo). Design system tipo ERP: sidebar navy fixa, topbar discreta, fundo cinza, cards brancos, tabelas compactas, badges. ========================================================================= */ /* Ponte com os tokens compartilhados (static/css/tokens.css, carregado ANTES deste arquivo). Os nomes curtos abaixo são o vocabulário histórico do painel e continuam valendo — o resto deste arquivo os consome sem saber que mudou nada. Trocar um valor do produto agora se faz em tokens.css, num lugar só. */ /* ------------------------------------------------------------------------- UI-QA-2 · Bloco 2 — SANEAMENTO. Leia antes de aplicar tema escuro aqui. Este arquivo NÃO é só do painel: ele também veste `print_base.html` (13 telas de impressão) e duas páginas PÚBLICAS (`cobranca_publica.html` e `responsavel_publico.html`). É a combinação mais perigosa da plataforma para uma mudança de tema, e é por isso que o saneamento veio antes do tema. O que o Bloco 2 fez: - eliminou as VARIÁVEIS FANTASMA. O arquivo tinha 24 usos de `var(--x, fallback)` em que `--x` não era declarada em lugar nenhum (`--accent`, `--fg`, `--surface-2`, `--card-2`, `--line`, `--blue-*`): o fallback era o valor real, silenciosamente. Declarar um desses nomes num `:root` mudaria a cor de regras espalhadas sem ninguém entender por quê. Hoje NÃO resta nenhum `var()` com fallback neste arquivo. - separou BRANCO DE SUPERFÍCIE de BRANCO LITERAL. `background: #fff` virou `var(--card)` (superfície do painel, que DEVE escurecer no tema escuro); `color: #fff` virou `var(--gx-white)` (tinta sobre botão colorido, que NUNCA escurece). Três fundos ficaram deliberadamente em `--gx-white`: `.print-page`, `.public-card` e `.assinar-canvas` — papel, página pública e imagem de assinatura não são superfície de UI. O que AINDA NÃO foi feito (Bloco 4, com validação visual): - as paletas próprias de subsistema seguem como literais: grade visual (`.gv-*`), botões de chamada (`.btn--ok/--falta/--just`), categorias de auditoria (`.aud-cat--*`) e os vários azuis/roxos suaves. São ~110 literais. Convergi-los agora seria trocar paleta sem validação, e o Bloco 2 tinha que ser visualmente neutro. - o acento do painel é AZUL (`--primary`), mas chamada e config usam um indigo herdado (`--gx-indigo-500`). Incoerência real, decisão pendente. ------------------------------------------------------------------------- */ :root { --navy: var(--gx-shell); --navy-soft: var(--gx-shell-hover); --navy-active: var(--gx-shell-active); --primary: var(--gx-accent); --primary-600: var(--gx-accent-strong); --green: var(--gx-ok); --green-bg: var(--gx-ok-soft); --red: var(--gx-danger); --red-bg: var(--gx-danger-soft); --amber: var(--gx-warn); --amber-bg: var(--gx-warn-soft); --slate: var(--gx-neutral); --slate-bg: var(--gx-neutral-soft); --bg: var(--gx-bg); --card: var(--gx-surface); --border: var(--gx-line); --text: var(--gx-ink); --muted: var(--gx-ink-muted); --sidebar-w: var(--gx-sidebar-w); --topbar-h: var(--gx-topbar-h); /* UI-QA-2 - Bloco 4: tres nomes NOVOS com valor IDENTICO ao que ja estava escrito nos seletores. Nao mudam um pixel do tema claro -- existem para dar um ponto unico de troca no tema escuro, no lugar de repetir seletor por seletor la embaixo. --surface-2 era o token compartilhado de elevacao, em 5 seletores --accent-alt era o indigo 500 compartilhado, em 5 seletores --accent-alt-strong era o indigo 600 compartilhado, em 1 seletor O `accent-alt` e o indigo historico da chamada e do hub de configuracoes, que convive com o azul `--primary` do painel. A incoerencia continua registrada (ver o cabecalho do Bloco 2); o que este bloco faz e apenas deixar de espalhar o literal, para o tema escuro ter onde pegar. */ --surface-2: var(--gx-surface-2); --accent-alt: var(--gx-indigo-500); --accent-alt-strong: var(--gx-indigo-600); } /* ========================================================================= TEMA ESCURO DO PAINEL DA ESCOLA (UI-QA-2 · Bloco 4) ALCANCE. Este bloco só acende quando o `` traz `data-tema="escuro"`, e esse atributo é emitido por TRÊS templates: `painel/base.html` (as ~68 telas operacionais), `painel/selecionar_escola.html` e — desde o Bloco 5.2 — `painel/login.html`. `print_base.html`, `cobranca_publica.html` e `responsavel_publico.html` vestem este mesmo arquivo e NÃO emitem o atributo — por isso continuam claros sem precisar de exceção. A proteção do recibo é a ausência do atributo lá, não uma lista de bloqueio que alguém mantenha. A fronteira é: superfície vista pelo USUÁRIO participa; superfície vista por um TERCEIRO (papel, cobrança pública, validação de documento) não. COMO ESTÁ ORGANIZADO. Primeiro os APELIDOS: o painel inteiro consome `--card`, `--border`, `--text`, `--muted`, `--primary`, `--green`… e trocar a origem desses nomes já veste a maior parte das telas sem tocar num único seletor de componente. Depois vêm os ajustes que apelido nenhum resolve. A DOSE vem do microbloco 3.1, medida em L* (claridade perceptual), não em razão WCAG — perto do preto a razão comprime e engana. Card 7,1 acima da página; borda 7,3 acima do card (e não 15,9, que foi o erro corrigido lá); preenchimentos de estado +4 a +6 sobre o card. Razão WCAG fica para texto. O QUE NÃO ESCURECE, DE PROPÓSITO: - `--gx-white` onde ele significa TINTA sobre preenchimento colorido, e nos três fundos que o Bloco 2 separou (papel, cartão público, canvas de assinatura). Nenhum deles é superfície de painel; - `--escola-accent`: é a cor da MARCA do tenant (laranja, no caso da Planeta). Marca não é estado de tema. ========================================================================= */ :root[data-tema="escuro"] { /* Faz input, select, `input[type=date]` e barra de rolagem nascerem escuros. O painel é feito de formulário e tabela: sem isto, cada filtro apareceria como um retângulo branco no meio da tela. */ color-scheme: dark; --bg: var(--gx-dark-bg); --card: var(--gx-dark-surface); --surface-2: var(--gx-dark-surface-2); --border: var(--gx-dark-line); --text: var(--gx-dark-ink); --muted: var(--gx-dark-ink-muted); /* O navy era o shell (cabeçalho da grade densa, botão de busca). No escuro ele vira a superfície elevada: continua sendo "a faixa mais firme da tela", e o branco que já ia por cima segue com 11,6:1. */ --navy: var(--gx-dark-surface-2); --navy-soft: var(--gx-dark-line); --navy-active: var(--gx-dark-line); /* ACENTO — a armadilha do bloco, e a razão de existirem os overrides logo abaixo. `--primary` é usado como TEXTO (link, ação inline, valor azul) e como PREENCHIMENTO (botão primário, aba ativa, página atual). No claro o mesmo azul serve aos dois. No escuro não serve: como texto ele precisa clarear para ser legível sobre o card, e clareando ele deixa de aceitar tinta branca por cima. Ver `--gx-dark-on-accent` em tokens.css. */ --primary: var(--gx-dark-accent); --primary-600: var(--gx-dark-accent-strong); --accent-alt: var(--gx-dark-accent); --accent-alt-strong: var(--gx-dark-accent-strong); --green: var(--gx-dark-ok); --green-bg: var(--gx-dark-ok-soft); --red: var(--gx-dark-danger); --red-bg: var(--gx-dark-danger-soft); --amber: var(--gx-dark-warn); --amber-bg: var(--gx-dark-warn-soft); --slate: var(--gx-dark-neutral); --slate-bg: var(--gx-dark-neutral-soft); /* Categorias de auditoria: três famílias que não existem na escala de estados (roxo/rosa/teal). Ficam aqui, e não em tokens.css, porque são vocabulário de UM subsistema do painel — promovê-las a token compartilhado seria dar alcance de plataforma a uma decisão local. */ --cat-roxo: #372f5c; --cat-roxo-ink: #c4b5fd; /* 6,60:1 */ --cat-rosa: #4b2a44; --cat-rosa-ink: #f9a8d4; /* 6,76:1 */ --cat-teal: #183a35; --cat-teal-ink: #5eead4; /* 8,37:1 */ } /* ---- Tinta sobre acento preenchido ------------------------------------- Estes cinco seletores dizem `color: var(--gx-white)` no tema claro, sobre `--primary`. Com o acento clareado, branco sobre ele dá 2,5:1 — um botão primário que ninguém lê. A tinta passa a ser o próprio piso escuro. */ :root[data-tema="escuro"] .btn--primary, :root[data-tema="escuro"] .tab.is-active, :root[data-tema="escuro"] .pagination .is-current, :root[data-tema="escuro"] .stepper .step.is-active, :root[data-tema="escuro"] .ch-hbtn.is-active { color: var(--gx-dark-on-accent); } /* O contador dentro do botão de horário ativo usava véu branco translúcido sobre azul escuro; sobre azul claro ele sumiria. Vira véu escuro. */ :root[data-tema="escuro"] .ch-hbtn.is-active .ch-hbadge { background: rgba(0, 0, 0, .22); color: var(--gx-dark-on-accent); } /* `.stepper .step.is-done` é verde-sobre-verde-claro e continua coerente pelos apelidos; só a borda precisa acompanhar o soft escuro. */ :root[data-tema="escuro"] .stepper .step.is-done { border-color: var(--gx-dark-ok-soft); } /* ---- Superfícies e realces que estavam em literal ---------------------- Os valores claros continuam intactos nos seletores originais: o que segue são SOBRESCRITAS que só existem no escuro. Foi a escolha deliberada em vez de converter os literais em token — converter mexeria no tema claro, que já está aprovado, para resolver problema de um tema que ele não tem. */ :root[data-tema="escuro"] .table th { background: var(--surface-2); } /* Cabeçalho e hover não podem cair no mesmo nível, senão a linha sob o cursor some justamente na tela mais densa do painel. */ :root[data-tema="escuro"] .table tbody tr:hover { background: var(--slate-bg); } :root[data-tema="escuro"] .construtor__filtro, :root[data-tema="escuro"] .gv-total, :root[data-tema="escuro"] .ch-bloco-foot { background: var(--surface-2); } /* Azul suave (informação): badge, mensagem, chip ligado, menu de ações. */ :root[data-tema="escuro"] .badge--blue, :root[data-tema="escuro"] .messages .info, :root[data-tema="escuro"] .aud-cat--frequencia, :root[data-tema="escuro"] .chip--on, :root[data-tema="escuro"] .ch-bloco--agendado { background: var(--gx-dark-accent-soft); } :root[data-tema="escuro"] .ch-bloco--agendado .ch-bloco-hora { color: var(--gx-dark-accent-strong); } :root[data-tema="escuro"] .acoes-menu__list a:hover, :root[data-tema="escuro"] .acoes-menu__list button:hover { background: var(--gx-dark-accent-soft); } :root[data-tema="escuro"] .code-chip { background: var(--gx-dark-accent-soft); color: var(--gx-dark-accent-strong); } /* Avisos e alertas fora do vocabulário `.messages`. */ :root[data-tema="escuro"] .alert--erro { background: var(--gx-dark-danger-soft); border-color: var(--gx-dark-danger); color: var(--gx-dark-danger); } :root[data-tema="escuro"] .ch-fechar-aviso { background: var(--gx-dark-warn-soft); border-color: var(--gx-dark-warn); } :root[data-tema="escuro"] .acesso-portal__alerta { border-color: var(--gx-dark-warn); } :root[data-tema="escuro"] .mov-aviso--pendente { background: var(--gx-dark-warn-soft); border-color: var(--gx-dark-warn); } :root[data-tema="escuro"] .mov-aviso--assinado { background: var(--gx-dark-accent-soft); border-color: var(--gx-dark-accent); } :root[data-tema="escuro"] .freq-stat--destaque { background: var(--gx-dark-ok-soft); border-color: var(--gx-dark-ok); } /* Categorias de auditoria que não são estado. */ :root[data-tema="escuro"] .aud-cat--pedagogico { background: var(--cat-roxo); color: var(--cat-roxo-ink); } :root[data-tema="escuro"] .aud-cat--pacote { background: var(--cat-rosa); color: var(--cat-rosa-ink); } :root[data-tema="escuro"] .aud-cat--cadastro { background: var(--cat-teal); color: var(--cat-teal-ink); } /* ---- Grade visual / chamada ------------------------------------------- É a tela mais densa e a mais dependente de cor do painel: o estado de frequência de cada aluno é lido pela célula. Aqui os pares reaproveitam os MESMOS softs dos badges, de propósito — o mapa e a chamada precisam falar a mesma língua de cor, e inventar uma segunda escala aqui era como o claro acabou com quatro azuis levemente diferentes. */ :root[data-tema="escuro"] .gv-cell--st-pendente { background: var(--slate-bg); border-left-color: var(--gx-dark-neutral); } :root[data-tema="escuro"] .gv-cell--st-presente { background: var(--gx-dark-ok-soft); border-left-color: var(--gx-dark-ok); } :root[data-tema="escuro"] .gv-cell--st-falta { background: var(--gx-dark-danger-soft); border-left-color: var(--gx-dark-danger); } :root[data-tema="escuro"] .gv-cell--st-falta_justificada { background: var(--gx-dark-warn-soft); border-left-color: var(--gx-dark-warn); } /* Vaga livre: a listra fica entre a página e o card, discreta — ela marca "aqui não tem ninguém", não deve competir com as células ocupadas. */ :root[data-tema="escuro"] .gv-cell--livre { background: repeating-linear-gradient(45deg, var(--gx-dark-bg), var(--gx-dark-bg) 6px, var(--gx-dark-surface) 6px, var(--gx-dark-surface) 12px); } /* Números do rodapé e marcadores da chamada: no claro são tintas fechadas (#047857, #b91c1c…) que sobre card escuro reprovariam. */ :root[data-tema="escuro"] .gv-num--pres, :root[data-tema="escuro"] .ch-stat--ok b, :root[data-tema="escuro"] .ch-m--ok { color: var(--gx-dark-ok); } :root[data-tema="escuro"] .gv-num--falta, :root[data-tema="escuro"] .ch-stat--falta b, :root[data-tema="escuro"] .ch-m--falta, :root[data-tema="escuro"] .gv-encerrar-btn { color: var(--gx-dark-danger); } :root[data-tema="escuro"] .gv-num--pend, :root[data-tema="escuro"] .ch-stat--pend b, :root[data-tema="escuro"] .ch-m--pend { color: var(--gx-dark-neutral); } /* Legenda: quadradinhos de 12px. Aqui vale a TINTA cheia, não o soft — num selo desse tamanho o soft não se distingue do fundo. */ :root[data-tema="escuro"] .gv-sw { border-color: rgba(255, 255, 255, .14); } :root[data-tema="escuro"] .gv-sw--pend { background: var(--gx-dark-neutral); } :root[data-tema="escuro"] .gv-sw--pres { background: var(--gx-dark-ok); } :root[data-tema="escuro"] .gv-sw--falta { background: var(--gx-dark-danger); } :root[data-tema="escuro"] .gv-sw--just { background: var(--gx-dark-warn); } :root[data-tema="escuro"] .gv-sw--repo { background: var(--cat-roxo-ink); } :root[data-tema="escuro"] .gv-sw--extra { background: var(--gx-dark-warn); } /* Modo "marcando": a faixa de contexto e o botão "+ marcar" da célula livre. */ :root[data-tema="escuro"] .gv-marcando { background: var(--gx-dark-accent-soft); border-color: var(--gx-dark-accent); } :root[data-tema="escuro"] .gv-marcando--repo { background: var(--gx-dark-accent-soft); border-left-color: var(--gx-dark-accent); } :root[data-tema="escuro"] .gv-marcando--reforco { background: var(--cat-roxo); border-left-color: var(--cat-roxo-ink); } :root[data-tema="escuro"] .gv-marcar-btn { background: var(--gx-dark-accent-soft); border-color: var(--gx-dark-accent); color: var(--gx-dark-accent-strong); } :root[data-tema="escuro"] .gv-marcar-btn:hover { background: var(--gx-dark-line); } /* Botões de chamada rápida (presente / falta / justificada). */ :root[data-tema="escuro"] .btn--ok { background: var(--gx-dark-ok-soft); border-color: var(--gx-dark-ok); color: var(--gx-dark-ok); } :root[data-tema="escuro"] .btn--falta { background: var(--gx-dark-danger-soft); border-color: var(--gx-dark-danger); color: var(--gx-dark-danger); } :root[data-tema="escuro"] .btn--just { background: var(--gx-dark-warn-soft); border-color: var(--gx-dark-warn); color: var(--gx-dark-warn); } /* No claro o hover ESCURECE o preenchimento; no escuro ele precisa CLAREAR, senão o botão parece desligar quando o cursor chega. */ :root[data-tema="escuro"] .btn--ok:hover { background: var(--gx-dark-line); } :root[data-tema="escuro"] .btn--falta:hover { background: var(--gx-dark-line); } :root[data-tema="escuro"] .btn--just:hover { background: var(--gx-dark-line); } :root[data-tema="escuro"] .ch-hbadge { background: var(--gx-dark-danger-soft); color: var(--gx-dark-danger); } :root[data-tema="escuro"] .ch-btn-cancelar { color: var(--gx-dark-ink-muted); } :root[data-tema="escuro"] .ch-btn-cancelar:hover { border-color: var(--gx-dark-danger); color: var(--gx-dark-danger); } /* ---- Sombras e anel de foco ------------------------------------------- Sombra clara não existe sobre fundo escuro: os borrões do tema claro (8% a 12% de preto) simplesmente somem. Aqui elas ficam mais opacas para o menu suspenso continuar descolando do conteúdo, e curtas, pela lição do 3.1. */ :root[data-tema="escuro"] .acoes-menu__list { box-shadow: 0 6px 18px rgba(0, 0, 0, .45); } :root[data-tema="escuro"] .card--link:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .4); } :root[data-tema="escuro"] .cfg-card:hover { box-shadow: 0 1px 8px rgba(0, 0, 0, .4); } :root[data-tema="escuro"] .construtor__filtro select:focus, :root[data-tema="escuro"] .construtor__filtro input:focus { box-shadow: 0 0 0 2px rgba(96, 165, 250, .35); } /* ---- Marca do tenant na topbar escura --------------------------------- O símbolo da Planeta é um SELO CIRCULAR ESCURO (fundo #0A0E17, marca laranja) com cantos quase brancos semitransparentes — e os cantos já são recortados pelo `border-radius: 50%` do badge. Ou seja: o risco real aqui nunca foi "quadrado branco"; é o oposto — selo escuro sobre topbar escura, que perde a borda e parece um furo. O anel devolve o limite sem tocar no arquivo, sem simular transparência e sem alterar a identidade. Escola sem marca registrada não passa por aqui: cai no fallback de iniciais (`.brand__badge--texto`), que é laranja com tinta branca nos dois temas. */ :root[data-tema="escuro"] .brand__badge img { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); border-radius: 50%; } /* ---- Entrada do painel (UI-QA-2 · Bloco 5.2 + 5.3) -------------------- Ate o Bloco 4 o login ficava FORA do tema de proposito, e o cabecalho deste bloco dizia isso. Nao diz mais: a partir do 5.2 ele participa, e a fronteira do isolamento passou a ser outra -- superficie que o PROPRIO USUARIO ve participa; superficie que um TERCEIRO ve (impresso, cobranca publica, validacao) nao. O 5.3 reduziu esta lista a UMA regra. O fundo deixou de precisar de override porque virou `--gx-brand-ink` fixo (exigencia do asset, ver a secao de entrada la em cima), e o disco de iniciais que tinha a armadilha de tinta-sobre-acento deixou de existir -- no lugar dele entrou a logo real. Sobra o aviso do SEC-1, que nasceu com hex claro cravado no seletor. */ :root[data-tema="escuro"] .login-msg { background: var(--gx-dark-accent-soft); border-color: var(--gx-dark-accent); color: var(--gx-dark-accent-strong); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--gx-font-ui); font-size: 14px; line-height: 1.45; } a { color: var(--primary); text-decoration: none; } a:hover { opacity: .8; } /* ========================================================================== Shell do painel da escola — UI-QA-1 · Bloco 3 A sidebar navy fixa de 240px saiu e deu lugar a uma navegação SUPERIOR modular. Duas razões: 8 itens não davam conta de ~120 rotas (cinco áreas reais não tinham entrada no menu), e a sidebar fixa era a causa do scroll horizontal da página inteira em telas estreitas. Este shell é CLARO de propósito. O Master (Gigantes) é escuro; a escola é um ambiente de trabalho claro. A diferença de luminância é o sinal de "onde estou" — as duas marcas usam laranja, então a cor sozinha não distinguiria os ambientes. ========================================================================== */ :root { --app-container: 1600px; --app-gutter: max(20px, calc((100% - var(--app-container)) / 2 + 20px)); /* Acento do tenant. O shell sobrescreve inline quando a escola tem marca registrada (ver painel/templatetags/painel_nav.py); sem marca, segue o azul operacional de sempre. */ --escola-accent: var(--gx-accent); } body.app { min-height: 100vh; } .appbar { position: sticky; top: 0; z-index: 20; background: var(--card); border-bottom: 1px solid var(--border); } .appbar__topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; min-height: 60px; padding: 0 var(--app-gutter); } /* ---------- Marca da escola ---------- */ .brand { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--text); } .brand:hover { text-decoration: none; opacity: .85; } .brand:focus-visible { outline: 2px solid var(--escola-accent); outline-offset: 3px; border-radius: 9px; } /* O badge é redondo e recorta a arte: a logo da Planeta é um selo circular com cantos brancos, e o `border-radius` os elimina sem editar o arquivo. */ .brand__badge { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; display: inline-flex; align-items: center; justify-content: center; } .brand__badge img { display: block; width: 100%; height: 100%; } .brand__badge--texto { background: var(--escola-accent); color: var(--gx-white); font-size: 13px; font-weight: 700; letter-spacing: .02em; } .brand__nome { font-weight: 700; font-size: 15px; letter-spacing: .01em; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; } /* ---------- Navegação por módulos ---------- Rola DENTRO DE SI quando não cabe; a página nunca rola na horizontal. */ .modnav { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .modnav::-webkit-scrollbar { display: none; } .modnav__link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 7px; font-size: 13.5px; color: var(--muted); line-height: 1; white-space: nowrap; flex: none; } .modnav__ico { width: 15px; text-align: center; font-size: 13px; opacity: .7; } .modnav__link:hover { background: var(--slate-bg); color: var(--text); text-decoration: none; } .modnav__link.is-active { background: var(--slate-bg); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--escola-accent); } .modnav__link.is-active .modnav__ico { opacity: 1; } .modnav__link:focus-visible { outline: 2px solid var(--escola-accent); outline-offset: -2px; } /* ---------- Faixa 2: telas do módulo aberto ---------- */ .subnav { display: flex; gap: 4px; align-items: center; padding: 0 var(--app-gutter) 8px; overflow-x: auto; scrollbar-width: none; } .subnav::-webkit-scrollbar { display: none; } .subnav__link { padding: 5px 10px; border-radius: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; flex: none; } .subnav__link:hover { background: var(--slate-bg); color: var(--text); text-decoration: none; } .subnav__link.is-active { background: var(--slate-bg); color: var(--text); font-weight: 600; } .subnav__link:focus-visible { outline: 2px solid var(--escola-accent); outline-offset: -2px; } /* ---------- Usuário e ações ---------- */ .appbar__acoes { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; padding: 8px 0; } .appuser { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .appuser__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--slate-bg); color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none; } .appuser__nome { font-size: 12.5px; color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .appbar__acao { font-size: 12.5px; color: var(--muted); line-height: 1; padding: 7px 11px; border: 1px solid var(--border); border-radius: 6px; white-space: nowrap; } .appbar__acao:hover { background: var(--slate-bg); color: var(--text); text-decoration: none; } .appbar__acao:focus-visible { outline: 2px solid var(--escola-accent); outline-offset: 2px; } /* Controle de tema — UI-QA-2 · Bloco 4. Reusa `.appbar__acao` para nascer idêntico a "Trocar escola" e "Sair": o toggle é mais uma ação do topo, não um enfeite novo. O `
` existe porque a troca é POST (ver painel/views_tema.py), e sem `display: flex` ele introduziria uma caixa de bloco no meio da fileira de ações. */ .tema-form { margin: 0; display: flex; } .tema-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; font: inherit; font-size: 12.5px; cursor: pointer; } .tema-btn__ico { font-size: 13px; line-height: 1; } /* ---------- Breadcrumb e conteúdo (mesmo eixo da topbar) ---------- */ .crumbbar { padding: 12px var(--app-gutter) 0; color: var(--muted); font-size: 12.5px; } .crumbbar b { color: var(--text); font-weight: 600; } .content { padding: 16px var(--app-gutter) 36px; } .page-title { font-size: 18px; font-weight: 600; margin: 0 0 16px; } /* Marca + ações ocupam ~440px e os 8 módulos ~700px: abaixo de ~1200 não cabem na mesma linha. Em vez de deixar o navegador quebrar onde quiser (as ações caíam sozinhas numa linha órfã), a navegação desce inteira para a 2ª linha. */ @media (max-width: 1200px) { .appbar__topo { padding: 6px 16px; } .subnav { padding: 0 16px 8px; } .crumbbar { padding: 12px 16px 0; } .content { padding: 16px 16px 36px; } .modnav { order: 3; width: 100%; } .appuser__nome { max-width: 130px; } } @media (max-width: 560px) { .brand__nome { max-width: 150px; } .appuser__nome { display: none; } /* No celular sobra o ícone; o rótulo continua no `title` do botão. */ .tema-btn__txt { display: none; } } /* ---------- Cards ---------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; } .card + .card { margin-top: 16px; } .card__head { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card__title { font-size: 14px; font-weight: 600; margin: 0; } .card__body { padding: 16px; } .grid { display: grid; gap: 16px; } .grid--kpi { grid-template-columns: repeat(4, 1fr); } .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1100px) { .grid--kpi { grid-template-columns: repeat(2, 1fr); } .grid--2, .grid--3 { grid-template-columns: 1fr; } } /* ---------- KPI ---------- */ .kpi { background: var(--card); border: 1px solid var(--border); border-radius: 4px; padding: 16px; border-left: 4px solid var(--primary); } .kpi--green { border-left-color: var(--green); } .kpi--red { border-left-color: var(--red); } .kpi--amber { border-left-color: var(--amber); } .kpi__value { font-size: 24px; font-weight: 700; color: var(--text); } .kpi__value.green { color: var(--green); } .kpi__value.red { color: var(--red); } .kpi__label { font-size: 12px; color: var(--muted); margin-top: 2px; } /* Linha de comparação financeira (A receber / Recebido / Inadimplência) */ .stat-row { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); } .stat-row:last-child { border-bottom: none; } .stat-row__label { color: var(--muted); } .stat-row__value { font-weight: 700; } .stat-row__value.green { color: var(--green); } .stat-row__value.red { color: var(--red); } .stat-row__value.blue { color: var(--primary); } /* ---------- Tabelas ---------- */ .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th, .table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); } .table th { color: var(--muted); font-weight: 600; background: #fafbfc; white-space: nowrap; } .table tbody tr:hover { background: var(--surface-2); } .table .num { text-align: right; white-space: nowrap; } .table--compact th, .table--compact td { padding: 7px 12px; } .empty { padding: 24px; text-align: center; color: var(--muted); } /* ---------- Badges ---------- */ .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 1.6; } .badge--green { background: var(--green-bg); color: var(--green); } .badge--red { background: var(--red-bg); color: var(--red); } .badge--amber { background: var(--amber-bg); color: var(--amber); } .badge--blue { background: #e6effe; color: var(--primary-600); } .badge--slate { background: var(--slate-bg); color: var(--slate); } /* ---------- Busca / filtros / abas ---------- */ .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .search { display: flex; flex: 1; min-width: 260px; } .search input { flex: 1; padding: 10px 12px; font-size: 14px; border: 1px solid var(--border); border-right: none; border-radius: 4px 0 0 4px; outline: none; } .search input:focus { border-color: var(--primary); } .search button { background: var(--navy); color: var(--gx-white); border: none; padding: 0 16px; border-radius: 0 4px 4px 0; cursor: pointer; } /* `flex-wrap` — UI-QA-1 · B4: seis abas não cabem em 390px e eram a última coisa fazendo a PÁGINA inteira rolar na horizontal. Quebrar em duas linhas mantém todas visíveis; esconder atrás de scroll esconderia Progresso e Frequência. */ .tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .tab { padding: 6px 12px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; color: var(--muted); background: var(--card); } .tab.is-active { color: var(--gx-white); background: var(--primary); border-color: var(--primary); } .tab:hover { text-decoration: none; } .filters { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; } .field { display: flex; flex-direction: column; gap: 4px; } .field label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .field select, .field input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; background: var(--card); } .btn { display: inline-block; padding: 8px 14px; border-radius: 4px; font-size: 13px; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; } .btn--primary { background: var(--primary); border-color: var(--primary); color: var(--gx-white); } .btn--ghost { background: transparent; } .btn:hover { text-decoration: none; } /* ---------- Paginação ---------- */ .pagination { display: flex; gap: 4px; align-items: center; margin-top: 14px; flex-wrap: wrap; } .pagination a, .pagination span { padding: 6px 11px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; color: var(--primary); background: var(--card); } .pagination .is-current { background: var(--primary); color: var(--gx-white); border-color: var(--primary); } .pagination .disabled { color: var(--muted); } .pagination__total { margin-top: 8px; color: var(--muted); font-size: 13px; } /* ---------- Detalhe ---------- */ .detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .detail-head h1 { font-size: 18px; margin: 0; } /* A classe existia no template desde sempre e nunca teve regra: o

ficava com margem de parágrafo (14px) e soltava o código do nome. — UI-QA-1 · B4 */ .detail-head__sub { margin: 4px 0 0; font-size: 13px; } .section-nav { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .section-nav a { padding: 8px 12px; color: var(--muted); border-bottom: 2px solid transparent; } .section-nav a:hover { color: var(--text); text-decoration: none; } .dl { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; } .dl dt { color: var(--muted); } .dl dd { margin: 0; } .muted { color: var(--muted); } .right { text-align: right; } .mt { margin-top: 16px; } /* ---------- Entrada do painel (login + seletor de escola) ---------- UI-QA-2 · Bloco 5.3 — mesmo padrao aprovado no login Master, sem o selo MASTER: campo escuro com a marca, cartao central, assinatura embaixo. O FUNDO E `--gx-brand-ink` NOS DOIS TEMAS, e isso nao e escolha estetica: `gigantes-horizontal.png` e um PNG OPACO cujo fundo E exatamente essa cor. E o que faz a logo encaixar sem retangulo aparente. Trocar o fundo desta tela sem trocar o asset reabre a emenda -- mesma restricao que a topbar do Master e o login do Master ja documentam. Foi tambem por isso que a marca saiu de DENTRO do cartao: sobre o cartao claro ela apareceria como um bloco escuro. O CARTAO, esse sim, segue o tema (Bloco 5.2). Resultado: a faixa de identidade e estavel e reconhecivel, e a superficie de trabalho acompanha a preferencia de quem entra. Nenhum override escuro e necessario aqui. Estas classes vestem DUAS telas: `painel/login.html` e `painel/selecionar_escola.html` -- a porta e a passagem logo apos ela. Ficam iguais de proposito; um seletor de escola com a cara antiga no meio do fluxo parecia outro sistema. */ .login-wrap { min-height: 100vh; display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center; padding: 24px; background: var(--gx-brand-ink); } .login-marca { display: block; height: 40px; width: auto; } .login-rodape { margin: 0; font-size: 12px; letter-spacing: .02em; color: rgba(255, 255, 255, .55); } .login-card { width: 100%; max-width: 380px; background: var(--card); border-radius: 10px; padding: 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } .login-card h1 { font-size: 18px; margin: 0 0 4px; } .login-card p { color: var(--muted); margin: 0 0 18px; font-size: 13px; } .login-card .field { margin-bottom: 14px; } /* `select` entra junto por causa do seletor de escola: sem ele o campo ficava com a largura do texto da maior opcao, e nao a do cartao. */ .login-card input, .login-card select { width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit; border: 1px solid var(--border); border-radius: 6px; } .login-card input:focus, .login-card select:focus { border-color: var(--primary); outline: none; } .login-card .btn--primary { width: 100%; padding: 11px; } .login-card .error { background: var(--red-bg); color: var(--red); padding: 10px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; } @media (max-width: 480px) { .login-marca { height: 32px; } .login-card { padding: 22px; } } /* ---------- Formulários ---------- */ .form-card { max-width: 760px; } .form-row { margin-bottom: 14px; } .form-row label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; } .form-row input, .form-row select, .form-row textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 4px; font-size: 14px; font-family: inherit; background: var(--card); } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--primary); outline: none; } .form-row .errorlist { color: var(--red); font-size: 12px; list-style: none; padding: 0; margin: 4px 0 0; } /* A ajuda do campo. Cinza e menor que o rótulo de propósito: ela explica, não compete com o nome do campo. Ver o comentário em `painel/_field.html`. */ .form-row .form-ajuda { color: var(--muted); font-size: 12px; margin: 4px 0 0; line-height: 1.4; } .form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } /* ⚠️ Nasce com a regra `[hidden]` DO LADO, e não 200 linhas depois: `display: grid` é regra de autor e VENCE o `display:none` que o navegador dá ao atributo `hidden` — quem escreve `