/* mocoengine · a pele do desenho aprovado — a casa é clara * ═══════════════════════════════════════════════════════════════════════════ * * Queixa do dono, 27-08-2026: «o engine ainda tem o aspecto antigo e está em * dark mode». As duas metades da frase têm a mesma causa — o motor nunca disse * ao `estilo.css` quem era. Não trazia `data-tema`, e por isso corria com a * escala da MONTRA (corpo de 15px, painéis de leitura, números de 40px); não * trazia `data-modo`, e por isso o sistema operativo escolhia o tema por ele. * * Os dois atributos estão agora no `index.html`, e é lá que a correcção mora. * ESTA FOLHA ENCOLHEU POR CAUSA DISSO: metade do que aqui estava era remendo * de densidade — `#conteudo { font-size: 13px }`, células a 28px, números a * apertar — a fazer à mão o que o bloco `:root[data-tema='engine']` da folha * da casa já fazia sozinho desde que foi escrito. Remendo que duplica um * interruptor existente é dívida, não trabalho. * * O QUE ESTA FOLHA FAZ, ENTÃO. Traz o ACABAMENTO da plataforma pública * (`painel.css` + `landing.css`, o desenho que o CEO aprovou) para as * superfícies do motor: o cartão de `--cartao` com a sombra macia em vez do * relevo esculpido, as pastilhas redondas com a pastilha escura no destino * actual, a barra de topo opaca com fio de `--linha`, o botão em cápsula. * * O QUE NÃO MUDA, E É DELIBERADO: a DENSIDADE. Linha de tabela a 28px, * cabeçalho pegajoso, algarismos tabulares em todo o número, controlos finos * ao rato. Isto é um motor, não uma montra — quem está aqui dentro varre * centenas de linhas por sessão. Em ecrã táctil tudo volta aos 44px: a * densidade é do ofício, não uma desistência de acessibilidade. * * Carrega DEPOIS do `estilo.css` e do `engine-componentes.css`, e só reescreve * classes que esses dois já emitem. Nenhuma linha de JavaScript muda por causa * dela. Não toca em `painel.css`, `landing.css` nem `sense.html`. * * CONTRASTES MEDIDOS nesta pele (não estimados): * tinta #14140F sobre cartão #FCFDFE 18,1:1 AAA * azul-moco #173D64 sobre cartão #FCFDFE 10,9:1 AAA * secundário #4C5561 sobre cartão #FCFDFE 7,4:1 AAA * secundário #4C5561 sobre fundo #F0F3F5 6,8:1 AAA (texto grande) · AA * creme #E8DDC8 sobre azul #173D64 8,3:1 AAA (botão principal) * texto-esc. #F2F5F8 sobre escuro #0B1119 17,3:1 AAA (pastilha activa) * âmbar #B45309 sobre fundo #F0F3F5 4,5:1 traço de foco (alvo 3:1) * fio do botão do modo (70% de --secundario) 3,4:1 contorno (alvo 3:1) * * RECALCULADAS, e não copiadas: a régua está em `test/contraste_engine.test.js` * e cai se algum par descer. Três destas linhas vinham erradas da primeira * escrita — 17,4 em vez de 17,3 aqui, e 15,9 em vez de 15,6 e 8,9 em vez de * 8,6 no bloco do escuro. Meio ponto não reprova nada; uma medida citada de * cor numa casa que vende medidas é a coisa que não se deixa passar. */ /* ═══ 0 · os alvos que não existiam ═══════════════════════════════════════ * * O `engine-componentes.css` pendura `--alvo` e `--alvo-fino` na classe * `.engine`, e essa classe NÃO ESTÁ EM ELEMENTO NENHUM desta app — nem no * `index.html`, nem em nada que o `app.js` crie. Consequência silenciosa: em * `.sala`, em `.facto`, na procura, no filtro e nos botões da ficha, o * `min-height: var(--alvo)` resolvia para nada e a declaração inteira caía. * As pastilhas das salas mediam a altura da letra. * * Uma variável que não existe não avisa: a regra desaparece sem erro. Ficam * declaradas na raiz, que é onde uma medida de toda a app pertence. */ :root { --alvo: 36px; /* controlo de chrome ao rato — 32px lia-se apertado ao lado da cápsula de 999px */ --alvo-fino: 24px; /* célula de tabela: o corpo da linha de 28px, sem o fio */ /* O raio do cartão do motor é 24px e não os 32px da montra. Os dois cabem na * regra do desenho («chrome até 28px, cartões 32px»); a montra tem dois * cartões por ecrã e o motor tem doze, e a 32px doze cantos redondos comem * a bancada. 24px mantém a família e devolve o espaço aos dados. */ --raio-cartao-engine: 24px; } /* ═══ 1 · o escuro, quando é ESCOLHIDO ════════════════════════════════════ * * O `ds/aurora.css` declara `--cartao` e `--cartao-sombra` uma só vez, em * claro, e o bloco escuro do `estilo.css` nunca lhes tocou. Media-se assim: no * tema escuro o cartão da entrada saía a `#FCFDFE` — branco de papel — em cima * de uma página a `#12161C`, com uma sombra de rodapé de página clara por * baixo. Era o defeito mais visível do modo escuro e ninguém o tinha visto * porque ninguém escolhia o modo escuro: ele acontecia. * * Agora que o escuro é uma escolha oferecida na moldura, tem de estar inteiro. * Os dois blocos repetem-se de propósito, pela mesma razão que o `estilo.css` * explica no seu ponto 19: `:root:not([data-modo='claro'])` pesa (0,2,0) e * apanha quem não escolheu; `:root[data-modo='escuro']` apanha quem escolheu. * * #F2F5F8 sobre cartão escuro #171C23 = 15,6:1 AAA * #BCB8AD sobre cartão escuro #171C23 = 8,6:1 AAA */ @media (prefers-color-scheme: dark) { :root:not([data-modo='claro']) { --cartao: #171c23; --cartao-sombra: 0 1px 2px rgba(0, 0, 0, 0.45), 0 16px 32px rgba(0, 0, 0, 0.50); --relevo-claro: #1e242d; --relevo-escuro: #080b0f; } } :root[data-modo='escuro'] { --cartao: #171c23; --cartao-sombra: 0 1px 2px rgba(0, 0, 0, 0.45), 0 16px 32px rgba(0, 0, 0, 0.50); --relevo-claro: #1e242d; --relevo-escuro: #080b0f; } /* ═══ 2 · A PORTA — o cartão da palavra-passe ═════════════════════════════ * * É a primeira coisa que se vê do motor e era a que mais destoava: caixa * cinzenta com o relevo esculpido, campo raso, botão de sombra, e o lockup do * MOCOSENSE — a marca da montra — a assinar o backoffice. * * Passa à linguagem do cartão da plataforma, sem excepção: superfície * `--cartao`, raio de 32px (aqui SIM: é um cartão único no meio do ecrã, é o * caso para que os 32px foram aprovados), a sombra macia de dois passos, e o * botão principal em cápsula cheia de azul com letra creme. */ .entrada { min-block-size: 100dvh; display: grid; place-items: center; padding: var(--e5); background: var(--fundo); } .entrada form { inline-size: min(400px, 100%); background: var(--cartao); border-radius: var(--raio-cartao, 32px); box-shadow: var(--cartao-sombra); padding: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; gap: var(--e4); } /* A wordmark do motor, na escala da marca da plataforma: 20px de display. * `moco` fino e `engine` cheio — as duas espessuras da mesma letra, que é * como a casa assina em toda a parte. O apoio leva `--secundario`, 7,4:1 * sobre o cartão; o corpo leva o azul de marca, 10,9:1. */ .entrada .wordmark { font-family: var(--fonte-display); font-size: var(--t4); line-height: 1; letter-spacing: -0.03em; color: var(--secundario); margin: 0; } .entrada .wordmark i { font-style: normal; font-weight: 300; } .entrada .wordmark b { font-weight: 700; color: var(--azul-moco); } .entrada .entrada-nota { font-size: var(--t2); line-height: 1.5; color: var(--secundario); margin: 0; max-inline-size: 44ch; } .entrada label { display: flex; flex-direction: column; gap: var(--e2); margin: 0; } /* O campo mede 48px, e não os 36px do chrome do motor: recebe uma palavra-passe * colada de um cofre e é o único controlo desta página. O raio é de cápsula, * como os campos da plataforma. */ .entrada input[type='password'] { min-block-size: 48px; inline-size: 100%; border: 0; border-radius: var(--raio-pilula, 999px); background: var(--fundo); box-shadow: var(--relevo-in); color: var(--tinta); padding: 0 var(--e5); font-family: var(--mono); font-size: var(--t3); letter-spacing: 0.08em; } /* O aviso de erro é o `.aviso.mau` da casa — creme com o traço de âmbar — e * não uma caixa vermelha. Uma palavra-passe errada é um facto sobre nós, não * um alarme. */ .entrada .aviso.mau { margin: 0; } /* ── DUAS PORTAS E O CONVITE (13-09-2026) ───────────────────────────────── * A entrada passou a ter dois cartões — «Entrar com nome» por cima, a * palavra-passe partilhada por baixo — e o motor ganhou o ecrã do convite de * operador, que usa o mesmo cartão. Sem `align-content`, a grelha esticava as * duas linhas até meio ecrã cada uma e os cartões ficavam longe um do outro. */ .entrada { align-content: center; gap: var(--e4); } .entrada .entrada-titulo { font-family: var(--fonte-display); font-size: var(--t3); font-weight: 700; color: var(--tinta); margin: 0; } /* O endereço, o segredo mostrado uma vez e o código colado têm a mesma * cápsula de 48px do campo da palavra-passe: recebem texto colado de um cofre * ou de uma mensagem, e é o alvo que importa. */ .entrada input[type='email'], .entrada input[type='text'] { min-block-size: 48px; inline-size: 100%; border: 0; border-radius: var(--raio-pilula, 999px); background: var(--fundo); box-shadow: var(--relevo-in); color: var(--tinta); padding: 0 var(--e5); font-family: var(--mono); font-size: var(--t2); } .entrada input[readonly] { letter-spacing: 0.02em; } .entrada a.entrada-nota { color: var(--azul-moco); text-decoration: underline; text-underline-offset: 3px; } /* ═══ 3 · A MOLDURA — a barra de estado e as salas ════════════════════════ */ /* A barra deixa de ser vidro e passa a ser a barra da plataforma: superfície * opaca com um fio de `--linha` por baixo, exactamente como o `.mold-topo` do * `painel.css`. * * A razão não é só de família. O vidro estava a desfocar por trás de uma barra * que fica presa no topo enquanto se varrem tabelas de centenas de linhas — * uma recomposição de `backdrop-filter` a cada pixel de rolagem, no gesto que * mais se faz neste ecrã. Opaca tapa melhor do que 78% de vidro tapava e não * custa nada a compor. O vidro fica onde o desenho o quer: no que sobrepõe * TEMPORARIAMENTE — a paleta da procura e a folha lateral. */ .barra-estado { background: var(--fundo); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--linha); } .barra-estado .linha-marca { gap: var(--e4); padding: var(--e3) var(--pad-pagina); min-block-size: 60px; } /* A marca é um link, e um link é um alvo de toque: 44px de altura mesmo com * uma letra de 20px lá dentro. É a mesma regra que o `.mold-marca` da * plataforma cumpre — um logótipo não fica isento por ser a marca. */ .barra-estado .wordmark { display: inline-flex; align-items: center; min-block-size: 44px; flex: none; } /* A procura é a cápsula com relevo interior do `.mold-procurar`. O `--esp-7` * de folga à direita existe para a tecla `/` desenhada não pisar o texto. */ .procura-unica input { border-radius: var(--raio-pilula, 999px); min-block-size: 40px; padding: 0 var(--e7) 0 var(--e5); background: var(--fundo); box-shadow: var(--relevo-in); } .procura-unica .dica-tecla { right: var(--e3); } /* A paleta de resultados cai EM CIMA da tabela. O desenho proíbe vidro sobre * superfície de dados — e com razão: um resultado de procura lido através de * doze linhas de números não se lê. Passa a cartão opaco, com a sombra da * plataforma, que é o que separa uma camada da outra sem esconder nenhuma. */ .paleta { background: var(--cartao); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: var(--raio-cartao-engine); box-shadow: var(--cartao-sombra); padding: var(--e2); } .paleta [role='option'] { border-radius: var(--raio-pilula, 999px); padding-inline: var(--e3); } .paleta [role='option'][aria-selected='true'] { background: var(--escuro); color: var(--escuro-texto); box-shadow: none; } .paleta [role='option'][aria-selected='true'] .tipo { color: var(--escuro-secundario); } /* O botão do modo: cápsula fina, a palavra do destino, nunca um ícone — não há * família de ícones nesta casa. Fica encostado ao fim da linha, depois dos * factos, porque é a coisa menos urgente da moldura. * * O FIO NÃO É `--linha`, E A DIFERENÇA MEDE-SE. `--linha` (#DDE3EA) sobre o * fundo (#F0F3F5) dá **1,16:1** — está lá e não se vê. Para um divisor entre * blocos isso chega e é de propósito; para o ÚNICO contorno de um controlo, é * uma cápsula que não existe: o botão lia-se como uma palavra solta na barra, * ao lado de cinco factos que também são palavras soltas. * * A régua para o contorno de um controlo é 3:1 (WCAG 1.4.11, contraste do que * não é texto). Medido no mix abaixo: * * claro 70% de #4C5561 em #F0F3F5 → #7D848D sobre #F0F3F5 = 3,39:1 ✓ * escuro 70% de #BCB8AD em #12161C → #898782 sobre #12161C = 5,06:1 ✓ * * Escreve-se com `color-mix` e não com a cor calculada, para o fio seguir os * dois modos com uma regra só — a mesma cor fixa que passa no claro reprova no * escuro, e ao contrário. A palavra continua em `--secundario`: 6,78:1. */ .barra-estado .modo { font: inherit; font-size: var(--t1); text-transform: lowercase; letter-spacing: 0.04em; color: var(--secundario); background: transparent; border: 1px solid color-mix(in srgb, var(--secundario) 70%, var(--fundo)); border-radius: var(--raio-pilula, 999px); min-block-size: var(--alvo); padding: 0 var(--e3); flex: none; cursor: pointer; transition: color var(--transicao), border-color var(--transicao); } .barra-estado .modo::before { /* O rótulo diz PARA ONDE se vai; sem esta palavra, «escuro» sozinho podia * ler-se como o estado actual em vez do destino. */ content: 'modo '; color: var(--secundario); } .barra-estado .modo:hover { color: var(--tinta); border-color: var(--secundario); } /* O foco do teclado é o traço de âmbar da casa, e tem de aparecer aqui: este * botão fica FORA do `#factos`, no fim da barra, e é o último parágrafo do * percurso de tabulação antes das salas. Sem contorno visível, quem navega por * teclado perde-o entre os cinco factos. */ .barra-estado .modo:focus-visible { outline: var(--foco); outline-offset: 2px; } /* Quem está na sessão e o «sair» (13-09-2026). O nome é texto calmo; a porta * partilhada diz-se em âmbar — com a palavra, nunca só com a cor —, porque é * a dívida que a casa quer ver paga. O «sair» é a mesma cápsula fina do modo, * sem a palavra de prefixo. */ .barra-estado .quem { font-size: var(--t1); color: var(--secundario); flex: none; } .barra-estado .quem.sem-nome { color: var(--tinta); border-block-end: 2px solid var(--ambar, #C8912E); } .barra-estado .sair { font: inherit; font-size: var(--t1); letter-spacing: 0.04em; color: var(--secundario); background: transparent; border: 1px solid color-mix(in srgb, var(--secundario) 70%, var(--fundo)); border-radius: var(--raio-pilula, 999px); min-block-size: var(--alvo); padding: 0 var(--e3); flex: none; cursor: pointer; } .barra-estado .sair:hover { color: var(--tinta); border-color: var(--secundario); } .barra-estado .sair:focus-visible { outline: var(--foco); outline-offset: 2px; } /* ── as salas ───────────────────────────────────────────────────────────── * Passam a pastilhas, como os destinos da plataforma: cápsula, e o destino * actual em pastilha ESCURA — `#F2F5F8` sobre `#0B1119`, 17,4:1. * * O que saiu foi o relevo esculpido: a sala activa era uma cova cinzenta na * superfície, indistinguível à distância de um campo de texto. O relevo é para * o que se toca e para o que contém; um destino actual é informação, e a regra * da casa diz que o relevo nunca é para o que se lê. */ .salas { border-block-start: 1px solid var(--linha); border-top: 0; overflow-x: auto; overscroll-behavior-x: contain; } .salas .fila { gap: var(--e1); padding: var(--e2) var(--pad-pagina); } .ala { gap: var(--e1); padding-inline-start: var(--e3); border-inline-start: 1px solid var(--linha); border-left: 0; } .ala:first-child { border-inline-start: 0; padding-inline-start: 0; } .ala .etiqueta { margin-inline-end: var(--e1); } .sala { min-block-size: var(--alvo); padding: 0 var(--e4); border-radius: var(--raio-pilula, 999px); color: var(--secundario); box-shadow: none; transition: background var(--transicao), color var(--transicao); } .sala:hover { background: var(--superficie); color: var(--tinta); box-shadow: none; } .sala[aria-current='page'] { background: var(--escuro); color: var(--escuro-texto); font-weight: 600; box-shadow: none; } .sala[aria-current='page']:hover { background: var(--escuro-2); color: var(--escuro-texto); } /* Os factos continuam a ser texto medido, nunca ícone mudo, nunca só cor — é * a regra que nasceu dos nove dias em que a BODIVA esteve parada sem ninguém * ver. Só se lhes acerta a altura, que dependia do `--alvo` inexistente. */ .facto { min-block-size: var(--alvo); } /* ═══ 4 · AS SALAS POR DENTRO ═════════════════════════════════════════════ * * A partir daqui a densidade vem toda do `:root[data-tema='engine']` da folha * da casa — corpo 13px, célula 8×12, números 20-28px, bancada de 1440px. Esta * folha só muda o ACABAMENTO das superfícies. */ /* O painel deixa de ser uma placa esculpida no fundo e passa a ser o cartão da * plataforma: `--cartao` (#FCFDFE), a sombra macia de dois passos, raio 24. * O relevo de 6px que aqui estava desenhava uma sombra de doze pixéis à volta * de cada um dos doze painéis de uma sala — e num motor isso é ruído a * competir com os números. */ #conteudo .painel { background: var(--cartao); border-radius: var(--raio-cartao-engine); box-shadow: var(--cartao-sombra); padding: var(--e5); margin-block-end: var(--e4); } /* Cartão dentro de cartão não se resolve com mais sombra: resolve-se tirando-a. * O painel aninhado (as grelhas e as filas de cartões que o `app.js` monta com * a mesma classe) fica plano sobre `--superficie`, que é o degrau de baixo da * mesma família. */ #conteudo .cartoes .painel, #conteudo .grelha .painel, #conteudo .painel .painel { background: var(--superficie); border-radius: var(--raio-chrome); box-shadow: none; padding: var(--e4); margin-block-end: 0; } #conteudo .painel > header { margin-block-end: var(--e4); padding-block-end: 0; } #conteudo .painel > header h2 { font-family: var(--fonte-display); font-size: var(--t4); font-weight: 700; letter-spacing: -0.02em; color: var(--azul-moco); margin: 0; } #conteudo .nota { color: var(--secundario); } /* ── as tabelas ─────────────────────────────────────────────────────────── * A linha de 28px não se pede com `height` — pede-se com a folga da célula, e * é a diferença entre uma linha que encolhe quando o conteúdo é curto e uma * que rebenta quando o conteúdo dá duas linhas. * * A conta: corpo 13px × entrelinha 1,45 = 19px de letra. Com `--celula-y` a * 4px de cada lado dá 27px, que é a linha de 28 do desenho contando o fio. * Ao dedo, `--celula-y` sobe a 12px e a mesma célula mede 43px + fio = 44px, * que é o alvo mínimo. Uma variável, duas densidades, nenhuma altura fixa. */ #conteudo { --celula-y: var(--e1); --celula-x: var(--e3); } @media (pointer: coarse) { #conteudo { --celula-y: var(--e3); } } #conteudo .tabela { font-variant-numeric: tabular-nums; } /* O cabeçalho pegajoso fica CREME e opaco, que é como a folha da casa o * escreve e porquê: doze superfícies de vidro na mesma imagem, todas a * recompor-se a cada pixel de rolagem, era o que mais custava neste ecrã. Esta * pele estava a pintá-lo de `--fundo` — a mesma cor da página — e o cabeçalho * desaparecia dentro do cartão em vez de se distinguir dele. Volta ao creme, * com a tinta de apoio corrigida para creme (7,46:1). */ #conteudo .tabela thead th { background: var(--creme-moco); color: var(--secundario-creme); box-shadow: inset 0 -1px 0 var(--linha); } /* A linha inteira acende ao passar, porque no desenho do motor toda a linha é * porta para a prova. A cor é o azul de marca a 5% — não uma zebra, não um * cinzento. */ #conteudo .tabela tbody tr:hover td { background: color-mix(in srgb, var(--azul-moco) 5%, var(--superficie)); } #conteudo .tabela tbody tr:focus-visible { outline: var(--foco); outline-offset: -2px; } /* O poço de dados: a tabela rola dentro do cartão, com o canto da família dos * dados (6px) e não o do cartão. */ #conteudo .envolve-tabela, #conteudo .rolo { border-radius: var(--raio-dados); overflow: auto; } /* ── os números ─────────────────────────────────────────────────────────── * A escala já vem do tema; o que se garante aqui é que nenhum algarismo sai * sem largura tabular. Uma coluna de valores que dança ao actualizar é a * diferença entre uma bancada e um ecrã de montra. */ #conteudo .numero, #conteudo .medida, #conteudo .numero-tira b, #conteudo .contagem { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } #conteudo .tira-numeros { gap: var(--e6); margin-block-end: var(--e4); padding-block-end: var(--e4); } /* ── as acções ──────────────────────────────────────────────────────────── * Cápsula, como toda a plataforma. O botão corrente é o de contorno — calmo, * porque num motor há muitos e nenhum deve gritar; o `.principal` é o cheio, * azul com letra creme (8,3:1), e é para a acção única de um ecrã. * * 36px ao rato e 44px ao dedo. O alvo não tem hierarquia: o que distingue um * botão principal de um secundário é o peso e a cor, nunca a área que o dedo * tem de acertar. */ #conteudo .accao, .entrada .accao { font-family: var(--fonte-texto); font-size: var(--t2); font-weight: 500; inline-size: auto; min-block-size: var(--alvo); padding: 0 var(--e5); border: 1px solid var(--linha); border-radius: var(--raio-pilula, 999px); background: transparent; color: var(--azul-moco); box-shadow: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--transicao), border-color var(--transicao); } #conteudo .accao:hover { background: var(--superficie); border-color: var(--secundario); } #conteudo .accao:active { background: var(--linha); } #conteudo .accao.secundaria { color: var(--secundario); } #conteudo .accao.principal, .entrada .accao.principal { background: var(--azul-moco); border-color: var(--azul-moco); color: var(--creme-moco); font-weight: 600; } #conteudo .accao.principal:hover, .entrada .accao.principal:hover { background: var(--azul-2); border-color: var(--azul-2); } /* Desactivado continua a levar a PALAVRA, e não só menos cor — é a regra do * `estilo.css` e mantém-se: `[disabled]::after { ' · indisponível' }`. */ #conteudo .accao[disabled], .entrada .accao[disabled] { background: var(--superficie); border-color: var(--linha); color: var(--secundario); cursor: default; } /* A cápsula da entrada é de largura inteira e mais alta: é a única acção da * página e vem logo a seguir a um campo de 48px. */ .entrada .accao { inline-size: 100%; min-block-size: 48px; font-size: var(--t3); } /* O esqueleto de carregamento fica com o canto do cartão que vai substituir — * senão a página salta de um rectângulo para um cartão quando os dados chegam. */ #conteudo .esqueleto { border-radius: var(--raio-cartao-engine); } /* ═══ 5 · A FOLHA LATERAL — a ficha ═══════════════════════════════════════ * * Aqui havia um defeito e não um desalinho. O `engine-componentes.css` escreve * a ficha inteira em `.folha .ficha`; o `index.html` dava ao `