/* `tokens.css` NÃO entra por @import. * * A URL importada não recebe o `?v=` que o AssetResolver carimba, e o * CDN serve `css/` com uma semana de cache. Na prática: alterar um token e * publicar não chegava a quem já tinha visitado — medido, o navegador * continuou servindo o valor antigo mesmo com o CDN já atualizado, e furar o * cache do desta folha não alcança o filho importado. * * Ele passa a ser versionado, emitido por Moldura::estilos() DEPOIS * desta folha — medido em /admin/auth/resetpassword, a ordem servida é * app-*.css, global_sistema.css, pages/…/resetpassword.css, fontes, * tokens.css, moldura.css, listas.css. Custom property não se resolve por * ordem de declaração: `var(--accent)` escrito aqui enxerga o valor que * tokens.css declara depois, e é por isso que a inversão não quebrou nada. * * O que ela quebrou está logo abaixo, no bloco de reserva. */ /* ═════════════════════════════════════════════════════════════════════════════ Tema do backoffice do ARGS. Esta folha NÃO declara mais cor. A paleta inteira vive em `tokens.css`, medida pixel a pixel nos dois logotipos; aqui ficam só as regras que dizem ONDE cada papel se aplica. Uma verdade só sobre a cor de um botão, que era o que este cabeçalho prometia e ainda não cumpria: até aqui os literais estavam espalhados por 40 lugares deste arquivo. Duas mudanças de papel vieram junto com os tokens, e valem registro: 1. O azul deixou de ser MARINHO e passou a ser o PETRÓLEO do emblema (#154b83 / #1e75a2 / #72aac6, medidos). O marinho de antes (#12294a) não existe em lugar nenhum do logotipo — foi escolha minha em 06/09, e ao lado do carmim da marca ele puxava para o roxo. 2. Título de página, de cartão e de modal deixaram de ser azuis e passaram a ser tinta (`--text-strong`). O azul passou a significar "isto é ação ou navegação"; um `

` não é nem uma coisa nem outra, e quando tudo é azul o azul não avisa mais nada. O que muda é acabamento, não estrutura: mesmas telas, mesmos fluxos, mesmos menus. Ver os commits de 06/09/2026. ═════════════════════════════════════════════════════════════════════════════ */ /* ── Reserva de papéis, para quem não recebe `tokens.css` ───────────────────── `Moldura::estilos()` é quem emite o do `tokens.css`, e quem não passa pelo layout do backoffice não o recebe. A tela de ACESSO é exatamente esse caso: `AuthController` a devolve terminal — ela declara o próprio , nunca chama `moldura()` —, e o `AssetResolver` só lhe entrega o bundle, esta folha e `pages/admin/auth/login.css`. O resultado, medido em 08/09 em /admin/auth/login: dos 44 papéis que esta folha consome, os 44 resolviam para NADA. Toda declaração `var(--papel)` ficava inválida e caía no valor inicial — 36 dos 41 elementos da tela pintavam diferente do pretendido. O pior deles era o botão que abre o sistema: `pages/admin/auth/login.css` pede `background: var(--args-navy)`, `--args-navy` é apelido de `--accent`, `--accent` não existia ali, o fundo virou `transparent` e sobrou texto BRANCO sobre o cartão BRANCO — 1:1, a ação principal do sistema invisível. As bordas dos campos e do filete, que deviam ser `#ddd9d7`, pintavam PRETAS pelo mesmo motivo. Estes valores são cópia dos que `tokens.css` produz no tema claro, lidos do estilo computado, não transcritos à mão. A cópia é inerte onde o original chega: `tokens.css` vem DEPOIS desta folha e ganha por ordem na mesma especificidade, e os blocos escuros de lá (`:root[data-theme="dark"]`, `@media (prefers-color-scheme: dark) :root:not([data-theme="light"])`) têm especificidade maior e ganham dos dois. Conferido elemento a elemento em /admin/auth/resetpassword, claro e escuro: nenhuma cor mudou. Reserva é remendo, não arquitetura. O conserto de verdade é uma linha — `tokens.css` no de `admin/auth/login.phtml`, ou no `AssetResolver` para todo módulo que não seja `application` — e vive em view/PHP, fora desta frente. Enquanto ela não vier, isto é o que impede a tela de acesso de sair sem paleta; no dia em que vier, este bloco inteiro sai. Ele NÃO é lugar para token novo: quem manda continua sendo `tokens.css`. */ :root { /* Marca e ação */ --brand: #8e262a; --accent: #1e75a2; --accent-hover: #175f92; --accent-text: #154b83; --text-on-accent: #fff; /* Superfícies e texto */ --paper: #eeeae7; --surface: #fff; --surface-hover: #efeceb; --surface-sunken: #f8f7f6; --text: #2b2726; --text-strong: #171414; --text-muted: #6b6461; /* `tokens.css` calcula este com `color-mix`; o resultado medido é este. */ --text-subtle: #6f6865; /* Bordas */ --border: #ddd9d7; --border-strong: #bbb5b2; --border-subtle: #efeceb; --border-field: #8d8683; /* Barra lateral e topo */ --chrome: #154b83; --chrome-hover: rgba(255, 255, 255, .1); --chrome-active: rgba(255, 255, 255, .16); --chrome-text: rgba(255, 255, 255, .82); --chrome-text-strong: #fff; /* Estados */ --success: #296a41; --success-text: #225533; --success-subtle: #e8f8ee; --success-subtle-border: #b8e6ca; --warning: #8b521f; --warning-text: #6d3e1b; --warning-subtle: #fff4e3; --warning-subtle-border: #fedaa0; --danger: #8e262a; --danger-text: #791c20; --danger-subtle: #fff2f1; --danger-subtle-border: #ffc8c7; --info-text: #154b83; --info-subtle: #f3f9fb; --info-subtle-border: #d0e4ed; /* Foco, relevo e raio */ --focus-outline: 3px solid rgba(30, 117, 162, .55); --focus-ring: 0 0 0 4px rgba(30, 117, 162, .28); --scrim: rgba(13, 51, 105, .35); --shadow: 0 1px 2px rgba(21, 75, 131, .06), 0 4px 16px rgba(21, 75, 131, .07); --shadow-lg: 0 12px 40px rgba(21, 75, 131, .18); --shadow-bar: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 12px rgba(13, 51, 105, .3); --radius: 10px; --radius-lg: 14px; } /* ── Compatibilidade: os nomes antigos viram apelidos dos papéis ────────────── Cinco folhas por página (`pages/admin/auth/login.css`, `pages/admin/perfil`, `pages/cadastro.css`, `pages/site.css`, `pages/application/escala`) e 28 regras deste arquivo consomem `--args-*`. Reapontar os apelidos troca a cor das cinco de uma vez, sem editar nenhuma delas e sem tocar em nenhuma view. Não crie `--args-*` novo: em código novo use o papel (`--accent`, `--text`, `--border`) direto de tokens.css. */ :root { /* Marca. `navy` guarda o nome antigo, mas o marinho acabou: aponta para o azul-petróleo que trabalha. As folhas por página usam este apelido das duas maneiras — como texto sobre cartão claro (escala) e como fundo de botão com texto branco por cima (login) —, e o azul-700 é o único passo da rampa que serve para as duas com 5:1 ou mais. */ --args-navy: var(--accent); --args-navy-claro: var(--accent-hover); --args-vermelho: var(--brand); --args-ceu: var(--accent); /* Neutros. Passaram de viés AZUL para viés QUENTE — o porquê está em tokens.css: cinza frio encostado em carmim esverdeia. */ --args-tinta: var(--text); --args-cinza: var(--text-muted); --args-cinza-claro: var(--text-subtle); --args-borda: var(--border); --args-fundo: var(--paper); --args-superficie: var(--surface); --args-superficie-alt: var(--surface-sunken); /* Semânticos */ --args-ok: var(--success); --args-ok-fundo: var(--success-subtle); --args-atencao: var(--warning); --args-atencao-fundo: var(--warning-subtle); --args-erro: var(--danger); --args-erro-fundo: var(--danger-subtle); --args-info: var(--info-text); --args-info-fundo: var(--info-subtle); --args-raio: var(--radius); --args-raio-g: var(--radius-lg); --args-sombra: var(--shadow); --args-sombra-alta: var(--shadow-lg); } /* ── Base ────────────────────────────────────────────────────────────────── */ body { background-color: var(--paper); color: var(--text); -webkit-font-smoothing: antialiased; } a { color: var(--accent); } a:hover { color: var(--accent-hover); } /* Cabeçalho e conteúdo dividem a mesma caixa, com as mesmas margens, e a caixa é a janela inteira. Houve aqui um teto de 1560px só no `.page-content` — que deixava o título e os botões com 1956px e a tabela logo abaixo com 1560 — e depois um de 2100px no `article`, que resolvia o desalinhamento mas devolvia margens de 230px de cada lado num monitor de 2560. Nos dois casos a conta era minha, e nos dois a tela sobrava. Sem teto: a grade da escala, que é o caso extremo (uma coluna por instrutor, dezoito colunas num dia cheio), usa cada pixel disponível. O que limita a largura de uma tela passa a ser o conteúdo dela, não um número escolhido aqui. */ article { /* O rodapé é fixo: sem esta folga o último botão do formulário fica embaixo dele. "Salvar" ficava cortado na tela de notícias. */ padding: 20px 24px 72px; } /* A barra fixa do topo já é compensada pelo padding do body; a margem daqui somava mais 30px e empurrava o título para 110px do topo da janela. */ .page-content { max-width: none; } hr { border-color: var(--border); opacity: 1; } /* ── Barra de navegação ──────────────────────────────────────────────────── */ .navbar.bg-dark { background-color: var(--chrome) !important; box-shadow: var(--shadow-bar); padding-top: .35rem; padding-bottom: .35rem; } .navbar .navbar-brand { padding: 4px 18px 4px 4px; } .navbar .navbar-brand img { height: 34px; } .navbar .nav-link { color: var(--chrome-text); border-radius: 8px; padding: .4rem .7rem; font-size: 14.5px; transition: background-color .12s ease, color .12s ease; } .navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-item.show > .nav-link { color: var(--chrome-text-strong); background-color: var(--chrome-hover); } .navbar .nav-link.active { color: var(--chrome-text-strong); background-color: var(--chrome-active); } .navbar .nav-link i.fa { opacity: .85; margin-right: 2px; } .navbar .dropdown-menu { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; margin-top: 6px; } .navbar .dropdown-item { border-radius: 7px; padding: .45rem .6rem; font-size: 14px; color: var(--text); } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background-color: var(--surface-sunken); color: var(--accent-text); } .navbar .dropdown-item.active { background-color: var(--accent); color: var(--text-on-accent); } .navbar .dropdown-item i.fa { width: 18px; text-align: center; color: var(--text-subtle); margin-right: 4px; } .navbar .dropdown-item:hover i.fa { color: var(--accent); } .navbar .dropdown-item.active i.fa { color: var(--text-on-accent); opacity: .8; } .navbar .dropdown-divider { border-color: var(--border); margin: 5px 4px; } /* `position: inherit` aqui vinha do layout antigo. Como o seletor é por id, ganhava do `position: relative` da barra da escala pública — e o filete da marca, que é um ::before absoluto, perdia o ancestral posicionado e ia grudar no topo da janela, atravessado na tela inteira. */ #divNavEscala { position: relative; } /* ── Cabeçalho da página ─────────────────────────────────────────────────── */ .cabecalho-pagina { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--border); } .cabecalho-pagina h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.015em; color: var(--text-strong); display: flex; align-items: center; gap: 10px; } .cabecalho-pagina h3 i.fa { color: var(--text-subtle); font-size: 19px; } .cabecalho-pagina__subtitulo { margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); } .cabecalho-pagina__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; } /* Compatibilidade com telas que ainda montam o cabeçalho à mão. */ .page-header { padding-top: 0; margin: 0 0 16px; } .page-header h3 { margin: 0; font-size: 22px; font-weight: 700; color: var(--text-strong); } /* ── Botões ──────────────────────────────────────────────────────────────── */ .btn { border-radius: 8px; font-weight: 600; letter-spacing: .005em; border-width: 1px; transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .05s ease; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: var(--focus-outline); outline-offset: 2px; box-shadow: none; } .btn-sm { padding: .38rem .8rem; font-size: 13.5px; } /* As sete variantes de botão (`primary`, `success`, `info`, `danger`, `warning`, `secondary`, `link`) moravam aqui, com dez hexadecimais soltos entre elas. Foram para a ponte de componentes de `tokens.css`, com as mesmas decisões de sempre — inclusive as duas que valem repetir: · o `btn-info` do "Pesquisar" continua sendo um botão CLARO de contorno: o ciano de fábrica dá 1,9:1 com texto branco; · o `btn-warning` idem, pelo mesmo motivo. O que muda é que agora o `btn-primary` é o azul-petróleo medido no emblema e escurece no hover, em vez de clarear — e que as sete variantes acompanham o tema escuro sem uma linha a mais, porque apontam para papel e não para cor. O motivo de estarem lá e não aqui é o site público: `global_site.css` não carrega esta folha, e antes ficava com os botões azul-Bootstrap. */ /* ── Formulários ─────────────────────────────────────────────────────────── */ /* O rótulo era `--text-muted`: cinza médio sobre cinza claro, e o formulário inteiro parecia desabilitado. O rótulo é o que se lê primeiro — vai no tom do texto. */ label, .control-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; letter-spacing: .005em; } /* Um