serifada 26/32px ..... OS PRECOS
📌 O preço está ao lado do título de tela, não ao lado do texto corrido. A
decisão é de 02/09 e o produto nunca a aplicou — «a errata mudou a tabela do
documento e não os geradores».
⚠️ E o peso desce de 700 para 400, que é o da face serifada. Medi o contraste
depois, porque uma face mais leve pode perder o que a face pesada tinha:
`--texto` sobre `--papel` dá 15,85 no claro e 17,59 no escuro — a razão não
muda com o peso, e a 29,6px é texto grande, cujo piso é 3. Passa com folga
nos dois modos, e a objeção do `#001A56` invisível continua respondida. */
.pr-preco { margin: 12px 0 0; min-height: 1.95rem; display: flex; align-items: flex-end;
font-family: var(--leitura); font-size: 1.85rem; font-weight: 400; line-height: 1.05;
color: var(--texto); font-variant-numeric: tabular-nums }
/* "Fale conosco" é frase e não número: no corpo de 1.85rem ele fica com cara de
preço, e a caixa passa a parecer ter um.
⭐ ELE HERDA A FACE E O PESO do `.pr-preco`, e é o certo: a prancha desenha-o
no MESMO papel tipográfico — serifada 400 —, tratando-o como preço mesmo
quando o preço é uma frase.
⛔ MAS O TAMANHO NÃO SOBE PARA OS 32 DA PRANCHA, e a razão é a linha acima,
que é anterior e continua verdadeira. A prancha discorda dela; a razão é
medida e escrita, e fica. */
.pr-fale { font-size: 1.3rem }
.pr-unit { min-height: 17px; margin: 5px 0 0; font-size: .8rem; color: var(--muted) }
/* O QUE UM CRÉDITO PAGA — o bloco que responde a pergunta da OPERAÇÃO, não a
do pacote.
⚠⚠ A LINHA MUDOU DE LADO, e a razão que a punha em cima deixou de ser
verdade. Estava escrito aqui: «fica DEPOIS da tabela e separado por uma
linha, para não se ler como uma quinta caixa de preço». Em 04/09 o Alan
mandou o bloco para debaixo do título, e a linha de cima passou a desenhar
um risco entre o «Preços» e ele — um sublinhado do título, que ninguém pediu.
⭐ A PROMESSA fica de pé; muda o lado que a cumpre. O que o bloco precisa de
não ser confundido com é a grade, e a grade agora está POR BAIXO: a linha
desce para o `border-bottom`. D-1556 — quem muda a regra muda o comentário
na mesma volta, e aqui a regra mudou porque o comentário deixou de a
descrever.
⚠️ Sem cor literal nenhuma aqui: cada uma sai de token com par nos dois
modos. A tela ao lado acabou de custar um preço invisível no escuro por um
`#001A56` escrito à mão. */
.cr-paga { margin: 22px 0 0; padding: 0 0 20px; border-bottom: 1px solid var(--linha) }
.cr-paga-titulo { margin: 0 0 12px; font-size: .74rem; font-weight: 500;
letter-spacing: .12em; text-transform: uppercase; color: var(--texto-fraco) }
.cr-paga-lista { margin: 0; padding: 0; list-style: none; display: flex;
flex-direction: column; gap: 8px; font-size: .92rem; color: var(--texto) }
.cr-paga-lista b { font-weight: 600 }
/* O selo diz que a linha é facultativa. É rótulo e não botão: sem fundo cheio,
que o faria competir com o «mais vendido» da tabela acima. */
.cr-paga-selo { margin-left: 6px; padding: 1px 7px; border-radius: 999px;
border: 1px solid var(--linha); font-size: .66rem; font-weight: 600;
letter-spacing: .08em; color: var(--texto-fraco); vertical-align: 2px }
.cr-paga-promo { margin: 14px 0 0; font-size: .85rem; line-height: 1.5; color: var(--texto) }
.cr-paga-promo a { color: var(--acento-escuro) }
.cr-paga-nota { margin: 12px 0 0; padding-left: 11px; border-left: 2px solid var(--linha);
font-size: .82rem; line-height: 1.5; color: var(--texto-fraco) }
/* `flex:1` na lista, e é o que alinha os botões das quatro caixas na mesma
linha quando uma tem quatro itens e as outras cinco. */
.pr-itens { flex: 1 1 auto; list-style: none; margin: 17px 0 0; padding: 0;
display: grid; gap: 9px; align-content: start }
.pr-itens li { display: flex; gap: 9px; font-size: .85rem; line-height: 1.35 }
/* ⚠ O EMBRULHO DO ITEM COMPOSTO CRESCE, e sem isto ele encolhia ao texto.
Medido: a sublista dos cinco formatos media 166px onde o cartão lhe dava
250 — a prancha desenha-a a 245. A causa não era a largura do CARTÃO (320
na prancha contra 316 aqui, praticamente o mesmo): era este `
` ser um
filho de flex sem `flex-grow`, portanto do tamanho da linha mais comprida.
⭐ O `min-width: 0` vai junto e não é enfeite: sem ele um filho de flex
recusa-se a encolher abaixo do conteúdo, e a sublista deixaria de poder
quebrar dentro do cartão estreito do celular. */
.pr-itens li > div { flex: 1 1 auto; min-width: 0 }
.pr-ok { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none;
/* ⚠ `#009FF0` é o `--ciano`, letra por letra. Como ele não inverte, o valor
computado é `rgb(0, 159, 240)` nos dois tons antes e depois — medido nas
25 marcas de `/pricing/`. */
stroke: var(--ciano); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
/* Os cinco formatos, aninhados. Recuados e menores porque são o DETALHE de um
item, e não seis itens: postos no mesmo peso, a exportação passava a ocupar
metade do cartão e o «Compra única» ficava com o mesmo destaque que o «.txt».
⚠⚠ O PONTO LEVA `--tinta-500`, e este número já foi corrigido DUAS vezes.
Primeiro era o `--tinta-300` da landing, e eu troquei-o por `--tinta-400`
com esta razão: «o `-300` é `#2A3F6E` no escuro, a 1,4 do papel — um ponto
que não se vê». ⛔ A razão estava certa e a MEDIDA estava pela metade: o
`-300` mede 1,83 no claro TAMBÉM. Eu medi um modo e escolhi por ele.
⛔ E o `-400` que pus não resolvia: 3,23 no claro e 3,43 no escuro, contra
um piso de 4,5. A sonda das três perguntas apanhou-o em 05/09.
⭐ A rampa inteira, medida, é o que decide:
--tinta-300 ... 1,83 · 1,82 ⛔ os dois
--tinta-400 ... 3,23 · 3,43 ⛔ os dois
--tinta-500 ... 4,89 · 11,27 ✅ e é MAIS CLARO que o texto
--texto-fraco . 6,40 · 12,47 ✅ mas iguala o texto da lista
📌 O `-500` é o único que passa nos dois E fica mais leve que a linha a que
pertence — que era a razão inteira de o ponto não ser `--texto-fraco`. */
.pr-sub { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 5px;
font-size: .78rem; line-height: 1.3; color: var(--texto-fraco) }
.pr-sub li { display: flex; gap: 7px }
.pr-ponto { color: var(--tinta-500) }
/* ⚠⚠ O `.md-lead` traz `margin-top: -14px`, e esse número existe para o COLAR
AO TÍTULO — é o que ele faz em todas as outras telas. Aqui ele já não vem
depois de um título: vem depois da grade (Alan, 04/09), e os -14px puxavam-no
para cima dos cartões.
⛔ E o `.md-lead` NÃO se toca: veste dezenas de telas, e mudá-lo lá para o
arranjar aqui é a troca que parte vinte para consertar uma. O recuo anula-se
SÓ onde o vizinho de cima é a grade — que é a única posição em que ele está
errado. */
.pr-grade + .md-lead, .cr-vazio + .md-lead { margin-top: 26px }
.pr-acao { margin-top: 18px }
.pr-caixa > .button { margin-top: 18px }
.pr-acao .button, .pr-caixa > .button { width: 100% }
/* ── A MARCA, e a troca de arquivo no escuro (SISTEMA-DE-DESIGN.md §1.2) ──
Os dois arquivos vão no HTML e a folha mostra um. `160px` é a medida da
prancha (§4); a altura é automática porque o SVG traz a proporção. */
.logo-claro, .logo-escuro { width: 160px; height: auto; max-height: none }
.logo-escuro { display: none }
/* Os três estados do tema, pela mesma razão de cima: a escolha explícita não
pode perder para a preferência do sistema. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .logo-claro { display: none }
:root:not([data-theme="light"]) .logo-escuro { display: block }
}
:root[data-theme="dark"] .logo-claro { display: none }
:root[data-theme="dark"] .logo-escuro { display: block }
/* ══ OS 13 PAPÉIS DA §2.1, medidos na prancha ══
No FIM da folha de propósito: estas regras dão o valor final de cada papel,
e vindo por último ganham das que já existiam sem precisar de
especificidade inventada nem de `!important` — que esta casa tem 9 e todos
do console.
Onde a prancha é silenciosa (▲ do documento), NÃO preenchi: a entrelinha
de quase tudo computa `normal` porque os blocos da prancha têm uma ou duas
linhas, e derivá-la para texto longo é decisão de desenho e não minha. */
/* ⚠ `space-between` e NÃO `flex-end`: com a trilha agora dentro do cabeçalho,
o `flex-end` de `styles.css` empurrava os DOIS para a direita e o título
deixava de começar na margem. A prancha põe o título à esquerda e a trilha
à direita, alinhados pela base. */
/* O par título/subtítulo é uma coisa só, colada por 5px — prancha
`Passo1Enviar`. O subtítulo é LEGENDA e não secção: 15px/400 em tinta fraca,
e não os 1,35rem/680 que ele tinha enquanto vivia solto no corpo. */
.ph-titulos { display: flex; flex-direction: column; gap: 5px }
.ph-titulos .jn-titulo {
font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--texto-fraco)
}
/* 1 · título de tela — a serifada, e é um dos DOIS lugares dela.
⚠ `--texto` e não `--marinho` (errata da §2.1, 02/09/2026): o marinho não
inverte, e no escuro este título dava 1,15 sobre o papel. */
/* ⚠⚠ E O `.cr-topo` ENTRA AQUI, porque ele é um `.page-heading` que ninguém
chamou assim.
A tela de Créditos é a ÚNICA das seis que não usa `.page-heading`: monta o
mesmo `flex` com `space-between` à mão, no `.cr-topo`. Copiou a disposição e
ficou sem a tipografia — o título saía em Manrope 25px peso 700 e
`--texto-fraco`, contra a serifada 30px peso 400 `--texto` de todas as
outras. Medido contra a `Passo10Creditos`: quatro diferenças num elemento só.
📌 Não é o `.cr-topo` que se apaga. Ele carrega uma decisão que o
`.page-heading` não tem: em ≤700px o botão de comprar fica NA MESMA LINHA do
título, e o `.page-heading` empilha. Apagar a classe trocava um defeito de
tipografia por um defeito de disposição no celular — e o comentário que
explica a exceção está vinte linhas abaixo, onde ninguém o leria a tempo.
⭐ Então o que se partilha é a REGRA do título, e não a classe. Uma causa,
um lugar, e a exceção do celular continua onde foi escrita. */
.page-heading h1, .cr-topo h1 {
font-family: var(--leitura); font-size: 30px; font-weight: 400;
letter-spacing: -0.3px; color: var(--texto)
}
/* 2 · o texto transcrito — o OUTRO lugar da serifada: é a voz do documento
lido, e é isto que a distinção protege */
.mk-texto {
/* `pre-wrap` e não `pre`: a transcrição vem com as quebras do documento, e
respeitá-las é o que faz o texto na tela parecer o texto no papel — mas ela
ainda precisa caber na coluna. */
/* Justificado e SEM hifenização. O hífen que o navegador inventa fica no meio
de uma transcrição paleográfica, onde tudo o que está escrito é para ser
lido como estava no papel — quem lê não tem como saber que aquele traço é
nosso e não do escrivão. Os buracos entre as palavras são o preço, e são
um defeito de aparência; o hífen seria um defeito de conteúdo. */
/* ⚠️ A TRANSCRIÇÃO É O CONTEÚDO, e estava na cor do corpo por herança — a
regra escrevia tamanho, entrelinha e justificação, tudo menos `color`.
Ela é a coisa que a pessoa pagou para ler, e lia-se mais fraco que os
rótulos à volta. Medido em 05/09/2026 contra a `Passo6Resultado`:
produto --texto-fraco #475A85 claro 6,40 escuro 11,22
prancha --tinta-800 #142C64 claro 12,48 escuro 13,62
⭐ Melhora nos DOIS modos, e o token tem par medido (#EAE6E2). É a mesma
espécie do valor do campo e do `.mk-volta`: ninguém escreveu a cor errada —
ninguém escreveu cor nenhuma. */
font-size: 1.05rem;
line-height: 1.85;
white-space: pre-wrap;
margin: 0;
text-align: justify;
hyphens: manual;
color: var(--tinta-800);
font-family: var(--leitura);
}
/* 3 · subtítulo de tela */
.md-lead {
margin: -14px 0 22px;
font-size: 15px;
font-weight: 400;
color: var(--texto-fraco);
}
/* 4 · título de bloco */
.mk-bloco-topo h3, .cr-extrato-topo h3 { font-size: 15px; font-weight: 500; color: var(--texto) }
/* 5 · corpo */
/* ⚠️ O TOKEN E DE PAPEL E NAO DA RAMPA, e a troca e so de VOCABULARIO:
`--texto-fraco` e `--tinta-600` valem o mesmo (#475A85 no claro, #D5D2CD no
escuro), entao nao se move um pixel.
⭐ O que muda e quem consegue LER esta linha. `--tinta-600` diz «o degrau 600
da rampa»; o que se queria dizer e «o texto secundario». Quem mexer na rampa
um dia mudava o corpo do produto inteiro sem saber que o estava a fazer.
⛔ E NAO E `--texto`: medido em 04/09/2026. Das 147 pecas com texto nas seis
telas de conta, 17 herdam esta linha DE FACTO — e sao rotulos de campo (CPF,
Pais, CEP, Logradouro...). A `Passo8Faturamento` pinta rotulo em
`--texto-fraco` peso 500 e VALOR em `--texto` peso 400: pos-los em `--texto`
dava-lhes a cor do valor, e ai sim divergiam da prancha.
⚠️ A conta que assusta e outra: 84 das 147 tem a mesma cor do corpo. Mas
«mesma cor» nao e «herda» — 67 declaram-na elas proprias. A prova nao e
comparar cores: e MUDAR A LINHA e contar quem se move. */
body { font-size: 13px; font-weight: 400; color: var(--texto-fraco) }
/* 6 · meta / legenda */
.mk-meta { font-size: 12.5px; font-weight: 400; color: var(--texto-fraco) }
/* 7 · rótulo de coluna — ⚠ mesma errata: era `--marinho`, e ninguém tinha
olhado esta linha no escuro. Dava 1,15, como o título. */
.tabela-cab span { font-size: 12.5px; font-weight: 500; color: var(--texto) }
/* 8 · item de menu, apagado e aceso.
⚠ A tinta era `--marinho` e dava 1,09 no escuro — o rótulo do item
selecionado era praticamente invisível. Errata da §2.1: `--texto`, que faz o
mesmo trabalho e TEM par nos dois modos.
⭐ E O PESO SOBE DE 500 PARA 600, e não é estética: é o SEGUNDO SINAL do
estado selecionado, depois de o Alan ter recusado o filete.
Hover e seleção separam-se por MATIZ — bege contra azul — e a norma 1.4.11
mede LUMINÂNCIA, que é cega ao matiz: os dois fundos ficam a 1,01 e 1,06 um
do outro, e em escala de cinzentos fundem-se. O peso não é cor: satisfaz a
1.4.1, não está sujeito a razão de contraste, e sobrevive a toda a
deficiência cromática. Precedente na casa: `.mk-pop-menu button.on` e
`.mk-gaveta-painel a.on` já usam 700. */
.module-tab { font-size: 13px; font-weight: 400; color: var(--tinta-600) }
.module-tab.active, .module-tab[aria-selected="true"] { font-size: 13px; font-weight: 500; color: var(--texto) }
/* ⚠ 600 → 500, da prancha. A COR fica em `--texto` e não vai a `--marinho`
como ela pede: `--marinho` não inverte, e no escuro este rótulo assenta numa
superfície escura — é o defeito da `RAMPA-ESCURA §4`, medido a 1,09. */
/* 9 · botão */
.button { font-size: 14px; font-weight: 500; line-height: 1.2 }
/* 10 · chip e trilha — e são DUAS medidas, não uma.
⚠ Estavam na mesma linha por os dois valerem 11px, e não por serem a mesma
coisa. Medido na `Passo2OQueFazer` (01/09): o rótulo da trilha é 12,5px e
não 11 — e os 11 faziam «Tipo (opcional)» sair com 72px onde a prancha
desenha 87, e a linha com 14 de altura onde ela tem 18.
⛔ E a emenda tem de ser AQUI: há um `.jn-rot { font-size: 11px }` lá em
cima, na linha 574, mas esta regra vem depois com a mesma especificidade e
é ela que decide. Corrigir a de cima não mudaria um pixel. */
.chip {
display:inline-block;
padding:3px 11px;
border-radius:999px;
font-weight:600;
border:1px solid;
line-height:1.5;
font-family:var(--ui);
font-size: 11px;
}
.jn-rot {
order: 2;
font-weight: 400;
padding: 0;
color: var(--tinta-500);
font-size: 12.5px;
}
/* 11 · numeração da trilha — branco sobre marinho, e o branco é a tinta
certa aqui porque o marinho também não inverte */
.jn-col.agora .jn-bola {
background: var(--primario);
border-style: none;
color: var(--sobre-primario);
font-size: 10.5px;
font-weight: 500;
}
/* 12 · nome de arquivo */
.mk-card-nome, .mk-res-nome { font-size: 12px; font-weight: 400; color: var(--texto) }
/* 13 · rótulo maiúsculo */
.mk-rotulo-maiusculo, .eyebrow, .section-kicker {
font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; color: var(--tinta-400)
}
/* ══ A BARRA DO TOPO E O MENU DA CONTA (prancha `Passo19Conta`) ══
Os valores são COPIADOS da prancha, não derivados. */
/* O saldo e o «Comprar» na barra — computador. */
.hd-saldo-largo { font-size: 13px; color: var(--texto-fraco) }
.hd-comprar { font-size: 13px; font-weight: 500; color: var(--acento-escuro); text-decoration: none }
.hd-comprar:hover { color: var(--texto) }
.hd-fio { width: 1px; height: 22px; background: var(--linha) }
/* ⚠ A variante de celular da barra: só `SALDO / 240`, empilhado. O
«Comprar» não cabe aqui — ele vive dentro do menu, e é por isso que as
duas variantes existem. */
.hd-saldo-estreito { display: none; flex-direction: column; align-items: flex-end; line-height: 1.2 }
.hd-saldo-estreito .hd-saldo-rotulo {
font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-500)
}
.hd-saldo-estreito b { font-size: 14px; font-weight: 500; color: var(--texto) }
.header-right-group {
flex: none;
display: flex;
align-items: center;
gap: 18px;
}
/* O painel: 248px, 8px abaixo da barra, alinhado à direita do avatar, e
nunca a menos de 16px da borda. Zero sombra — o sistema não tem nenhuma, e
um painel flutuante é a tentação óbvia para inventar a primeira. */
.mk-pop-menu.mk-conta {
/* ⚠ Os 8px da prancha são medidos a partir da BARRA; este painel é
ancorado no BOTÃO, que não termina onde a barra termina — e a diferença
não é a mesma nas duas larguras. **Tentei esticar o container até a
altura da barra para um `+8px` só servir aos dois: NÃO resolveu** (a
barra tem folga própria, e o resultado foi 12 e 16). Os dois números
abaixo são MEDIDOS na bancada, um por largura, e produzem 8px de folga
visível nas duas — que é o que a prancha pede. */
width: 274px; min-width: 0; right: 0; top: calc(100% + 4px);
/* Nunca a menos de 16px da borda: a barra tem 10px de folga no celular, e
`right: 0` deixaria o painel a 10. Medido: 10 → 16. */
margin-right: -6px;
max-width: calc(100vw - 32px);
display: none; flex-direction: column; gap: 2px; padding: 10px 8px;
background: var(--papel); border: 1px solid var(--linha); border-radius: 14px;
box-shadow: none
}
.mk-pop.aberto .mk-pop-menu.mk-conta { display: flex }
.mk-conta > a,
.mk-conta form > button {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; padding: 9px 12px; border: 0; border-radius: var(--radius-md); background: transparent;
font-family: inherit; font-size: 13px; font-weight: 400; color: var(--tinta-600);
text-decoration: none; text-align: left; cursor: pointer
}
/* ⚠ `--light-blue` e não pardo: a superfície de SELEÇÃO desta casa é azul, e
tem token, e tem dois sítios a usá-la — `.module-tab.active` na lateral e
`.mk-pop-menu button:hover` no popover genérico. Era este menu que estava a
sobrepor o certo com `--tinta-50`, e o resultado é que o mesmo gesto acendia
azul na coluna e pardo no painel, a dois centímetros um do outro. */
/* ⚠ A SOBREPOSIÇÃO DO MENU DE CONTA SAIU. `.mk-conta` não é irmão do popover
genérico: é um `.mk-pop-menu` com uma classe a mais, e os quatro usos são
todos menus de escolhas. A divergência era uma sobreposição, e não uma
decisão. Uma declaração serve os quatro — em `produto.css:102`. */
/* ⚠ O ESTADO e a AÇÃO deixam de partilhar o acento, e a regra é do sistema:
o painel tinha UM acento a dizer duas coisas — «aqui é a ação» e «aqui é
onde você está». Com sete linhas funcionava; com dez, não.
**Um estado marcado por superfície SOZINHA precisa de `--tinta-200`; um
marcado por superfície E acento pode usar `--tinta-50`.** O degrau escolhe-se
pelo trabalho que a superfície faz, e não pelo componente onde está.
⚠ Por isso a barra lateral NÃO acompanha: lá não há ação nenhuma a disputar
o acento, e a superfície fraca basta. Uniformizar por coerência quebraria a
regra. */
/* O fundo do selecionado vem da regra dos três estados, mais abaixo. Aqui fica
só o que é desta peça — e o peso NÃO muda, pela razão escrita lá. */
.mk-conta form > button.on { font-weight: 400; color: var(--tinta-600) }
.mk-conta form { margin: 0 }
.mk-conta form > button > span { display: inline-flex; align-items: center; gap: 8px }
.mk-conta .fl { width: 18px; height: 13px; border-radius: 2px; object-fit: cover }
.mk-conta-tique { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.mk-conta hr { height: 1px; margin: 6px 0; border: 0; background: var(--linha) }
/* O rótulo da secção: versalete, e é o papel 13 da §2.1. */
.mk-conta-secao {
margin: 0; padding: 4px 12px 6px;
font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-400)
}
.mk-conta-quem { padding: 6px 12px 8px }
.mk-conta-quem b { display: block; font-size: 13px; font-weight: 500; color: var(--texto) }
.mk-conta-quem span { display: block; font-size: 11.5px; color: var(--texto-fraco) }
/* ⚠ No computador o «Comprar» do menu NÃO existe: ele está na barra.
O seletor leva o `.mk-conta >` de propósito: `.mk-conta-comprar` sozinho
(0,1,0) PERDE para `.mk-conta > a` (0,1,1), e o item aparecia no
computador — medido na bancada, não deduzido. É especificidade e não
ordem, e por isso escrever a regra depois não bastava. */
/* A AÇÃO fica com o acento — é o outro lado da regra acima.
⚠⚠ E A TINTA É `--texto`, não `--marinho`: esta era a QUARTA linha da família
da §2.1, e a ficha listava três. Medida no escuro dava 1,15 sobre a
superfície do menu — o Alan leu-a como ilegível, e era.
📌 A REGRA QUE FALTAVA, e que custou cinco aplicações tarde: as cores que não
invertem são seguras como TINTA no claro e como SUPERFÍCIE nos dois modos.
Como tinta no escuro, nunca. */
.mk-conta > a.mk-conta-comprar { font-weight: 500; color: var(--texto) }
.mk-conta > a.mk-conta-comprar,
.mk-conta > hr.mk-conta-fio-comprar { display: none }
@media (max-width: 700px) {
.hd-saldo-largo, .hd-comprar, .hd-fio { display: none }
.hd-saldo-estreito { display: flex }
.header-right-group { gap: 12px }
.mk-pop-menu.mk-conta { margin-right: 6px; top: 100% }
.mk-conta > a.mk-conta-comprar { display: flex }
.mk-conta > hr.mk-conta-fio-comprar { display: block }
}
/* ══ A BARRA LATERAL EXPANDIDA (prancha; SISTEMA-DE-DESIGN.md §3.3 e §4) ══
⚠ Estes seletores carregam `.module-sidebar.is-expanded` de propósito: a
regra que estava lá tem essa especificidade (0,2,1) e VENCIA o papel 8 da
§2.1 que eu tinha escrito como `.module-tab` (0,1,0). Medido: a aba saía a
12,8px/650 enquanto a folha "dizia" 13px/400. É a terceira vez esta noite
que a especificidade decide sobre a ordem, e a lição é a mesma — a regra
escrita depois não ganha por ser depois. */
/* `.is-expanded` no seletor porque a folha base declara 236px com essa mesma
especificidade (styles.css:1030) — e o sistema (§4) diz 216 FIXO. */
.module-sidebar.is-expanded { width: 216px; padding: 14px }
.module-tabs { order: 1 }
/* ⚠ RECOLHIDA, só o ícone. O rótulo é um nó de texto dentro do `
`, e a
coluna de 64px cortava-o a meio da palavra — «Transcrib», «Document t».
Com a barra a nascer recolhida, isso é o que se vê primeiro. `font-size: 0`
apaga o texto e deixa o ícone, que tem medida própria.
⚠ ISTO É ESCONDER POR ENCOLHIMENTO, e foi assim que o fio da quinta bola
ficou pendurado. MEDI antes de o manter: o item recolhido dá 43px, o recuo
são 10+10, e o glifo de 21 ocupa o resto — o rótulo com fonte zero NÃO
empurra nada e o `justify-content: center` continua a centrar o ícone.
⭐ E aqui o encolhimento faz o que se quer também para quem não vê: o texto
permanece no fluxo e é ANUNCIADO pelo leitor de ecrã, que é o correto numa
navegação só de ícones. `display: none` calá-lo-ia. A diferença para a
quinta bola é essa: ali a peça tinha de sair inteira; aqui ela tem de sumir
do olho e ficar para o ouvido.
(Esta regra já tinha sido escrita e eu apaguei-a sem dar por isso ao
reescrever o bloco do botão logo abaixo. A conferência que fiz olhava UMA
regra do bloco, e não o que havia à volta dela.) */
.module-sidebar:not(.is-expanded) .module-tab { font-size: 0; justify-content: center }
/* ── O HOVER DA LATERAL: UMA REGRA PARA AS DUAS PEÇAS ──────────────────────
O botão e os itens tinham valores diferentes, e o Alan viu-os como duas
coisas na mesma coluna. Partilham a declaração: o que mudar, muda nos dois.
⚠⚠ AQUI ESTEVE ESCRITO QUE NÃO HAVIA TOKEN PARA ISTO, E ERA FALSO. Eu li a
§9 do `SISTEMA-DE-DESIGN.md` — «a prancha não desenha foco, hover nem
`:active`» — e concluí que a superfície não tinha nome. A §9 fala de FOCO e
de `:active`; a superfície de SELEÇÃO tem token, chama-se `--acento-lavado`
(apelidada `--light-blue`), e já estava em uso a dois seletores daqui, em
`.module-tab.active` e em `.mk-pop-menu button:hover`.
⭐ O que salvou isto foi ter reduzido dois literais a um em vez de escolher
uma cor: quando a resposta chegou, a troca foi uma linha. Declarar um buraco
é barato; enchê-lo por palpite não é. Mas declarar um buraco onde há token é
uma medida correta sobre a coisa errada — e desta vez a coisa errada foi a
secção do documento em que fui procurar. */
/* ⚠⚠ LACUNA DECLARADA: o bege do hover NO ESCURO não entrou nesta leva. É uma
cor quente numa família que o Alan já rejeitou uma vez, e ele tem de a ver
antes. Até lá, no escuro o hover fica no `--tinta-50` escuro, que é azul —
ou seja, no escuro hover e seleção voltam a competir na mesma rampa, com
1,11 contra 1,25 sobre o chão. Está errado e está sabido. */
.module-tab:hover, .module-sidebar-toggle:hover { color: var(--texto) }
/* ── OS TRÊS ESTADOS, E A ORDEM ENTRE ELES (§1.10) ─────────────────────────
inativo < hover < selecionado
⚠⚠ ESTA ORDEM ESTÁ ESCRITA PORQUE NINGUÉM A TINHA ESCRITO. O pardo fazia a
distinção por acidente; quando eu tirei o pardo do menu, hover e seleção
caíram os dois no mesmo azul e o Alan leu-o como avaria — com razão.
*Uma distinção que ninguém escreveu é uma distinção que a próxima correção
apaga*, e foi isso que aconteceu, há uma hora, comigo.
⚠ O token novo é o DE BAIXO: o `--acento-lavado` de hoje passa a ser o
HOVER, e a SELEÇÃO afasta-se do chão. Meter um azul entre o papel e o lavado
foi tentado e medido: dois degraus de 1,07, que não é correção — é o mesmo
defeito com mais um nome.
Tinta e peso NÃO mudam entre os três estados, e é deliberado: mexer na tinta
faria o item saltar de posição.
⚠⚠⚠ LACUNA DECLARADA, E NÃO É ESQUECIMENTO.
Nenhum destes fundos chega a 3:1 — nem o novo. Medido: seleção contra chão
dá 1,40 no claro e 1,56 no escuro. **O degrau maior melhora a leitura e NÃO
satisfaz a 1.4.11**: falta um segundo sinal a carregar o estado.
A §1.10 propunha um filete em `--acento-escuro` (3,19 e 4,93), e o Alan
RECUSOU-O em 02/09/2026: «não quero filete no item selecionado». O
substituto está pedido à frente de desenho e ainda não chegou.
⚠ Até chegar, a seleção é carregada por uma superfície sozinha — que é
exatamente o defeito que esta leva veio corrigir, com um número melhor.
Quem passar por aqui: NÃO invente o portador, nem por peso, nem por tinta,
nem por ícone. A resposta é da frente de desenho. */
/* ⚠⚠ A LATERAL SEPARA-SE DO MENU DA CONTA, e a razão é a fonte de cada um.
A `Passo2OQueFazer` desenha o item ativo da lateral com fundo `--tinta-50`
e peso 500 — medi-o com a barra EXPANDIDA, que é o estado que ela desenha e
que eu não tinha produzido até agora. O menu da conta não está em prancha
nenhuma, e por isso fica onde estava: mudar-lhe a superfície por arrasto
seria aplicar-lhe uma decisão que ninguém tomou sobre ele.
⚠ Isto NÃO responde à pergunta aberta logo acima — o portador da seleção,
que o Alan devolveu à frente de desenho ao recusar o filete. Aqui só muda a
superfície que a prancha nomeia; o portador continua a ser um só, e continua
a ser pergunta. */
.module-tab.active, .module-tab[aria-selected="true"] {
background: var(--tinta-50)
}
.module-sidebar.is-presa .module-sidebar-toggle,
.mk-conta form > button.on,
.mk-conta > a.on {
background: var(--acento-lavado)
}
.module-sidebar-toggle {
order: 2; margin: auto auto 0; width: 44px; height: 44px;
padding: 0; border: 0; border-radius: var(--radius-md); color: var(--tinta-600)
}
/* ⚠ PRESO ACENDE, e a prancha `Passo21Lateral` desenha-o: nos estados 3 e 4 o
botão é `color: var(--marinho); background: var(--tinta-50)` — exatamente o
par do item selecionado. Nos estados 1, 2 e 5 é `--tinta-600` e sem fundo.
Isto NÃO é o buraco da §9. Foco, hover e `:active` são estados transitórios
do apontador, e desses a prancha não fala. «Preso» é uma DECISÃO da pessoa
que persiste entre sessões — e a prancha desenha-a.
Sem este sinal, o estado 4 é indistinguível do 1 a olho: a mesma coluna de
64px, e num deles o rato funciona e no outro não. Era essa a avaria que o
Alan sentiu, e não a mecânica. */
.module-sidebar.is-presa .module-sidebar-toggle { color: var(--texto) }
/* ⚠⚠ DIVERGÊNCIA DELIBERADA DA PRANCHA, e está escrita para quem a comparar
depois: a `Passo21Lateral` desenha este aceso com `--tinta-50`, e aqui ele é
`--light-blue`. NÃO é desvio meu — é decisão do Alan, tomada em 02/09/2026,
depois de ver o botão aceso na tela.
A razão: era o ÚNICO aceso pardo numa coluna onde todo o resto acende azul, e
um aceso que destoa lê-se como avaria e não como estado. A nota que eu tinha
escrito ao lado já dizia querer «exatamente o par do item selecionado» — a
intenção estava certa e o par é que estava trocado.
⚠⚠ E A SEGUNDA MUDANÇA DE PRANCHA DO MESMO DIA: o estado 4 («presa fechada»)
MORREU. Recolher já não prende — o botão prende ao ABRIR, e a fechar só
fecha. Decisão do Alan, 02/09/2026.
⭐ Repare no que isso arruma nesta regra: o aceso deixou de ser a única
maneira de distinguir duas colunas de 64px iguais, porque já não há duas.
Ele passou de remendo a informação — e só aparece com a barra aberta, que é
onde é legível. */
/* ⚠ 160ms para a largura — o tempo da prancha. Eram 200. E o glifo gira no
mesmo tempo: `>` fechada, `<` aberta, porque ele diz o que o botão FAZ e não
em que estado a barra está. */
.module-sidebar {
top: 64px;
/* E a lateral termina onde o rodapé começa, em vez de correr até ao fim da
janela: são 44px, a altura do rodapé. */
/* ⚠ NOTA DE UM VÃO QUE SÓ APARECE COM A FAIXA NO AR, e que não se conserta
aqui — está escrito porque um defeito que ninguém reproduz depois é um
defeito que se descobre duas vezes.
Os 44px são a altura do rodapé, e com a faixa de consentimento fora do ar a
lateral acaba exatamente onde ele começa (medido: 655 e 655). Mas a faixa,
quando está no ar, EMPURRA O RODAPÉ PARA CIMA o que ela mede — regra
anterior, tomada porque a faixa o cobria — e a lateral não a acompanha: fica
um vão entre o fim de uma e o topo do outro.
Passageiro, e o desenho é olhado sem a faixa. Se um dia contar, o número tem
de sair de onde sai o do rodapé, e não ser escrito aqui outra vez. */
bottom: 44px;
/* ── O BOTÃO DA LATERAL, prancha `Passo21Lateral` ──────────────────────────
No PÉ da coluna, encostado ao rodapé.
⚠ SEM FILETE, e ele estava CERTO quando o desenharam: nos 64px a barra é uma
coluna de ícones sem rótulo, e um `>` sozinho leria-se como sexto item — o
filete dizia «isto não é da lista» sem inventar sinal novo.
⚠⚠ Essa razão caducou quando o rodapé passou a atravessar por baixo. O
rodapé já separa, o botão está encostado a ele, e duas linhas de 1px
encostadas dizem a mesma coisa duas vezes. A distinção que o filete comprava
passou a vir de graça. É a mesma forma do `align-items` desta manhã: uma
declaração correta sobre a moldura antiga, herdada pela nova, onde já não
faz o mesmo trabalho.
⚠ O ALVO CONTINUA 44×44 e isso não se toca: num tablet não há rato, e o
botão é a ÚNICA via de abrir a barra. Encolheu a folga, não o alvo — o que o
Alan viu como «toda essa altura» eram os 12px de recuo acima do filete mais
os 20px que o separavam de uma borda que já não é a vizinha. */
display: flex;
flex-direction: column;
transition: width .16s ease;
}
.module-sidebar-toggle-glyph { transition: transform .16s ease }
/* ⚠ Só a barra PRESA E ABERTA empurra o miolo. Expandida pelo rato ela passa
POR CIMA: o gesto transitório não reorganiza a tela, a decisão reorganiza.
Sem isto, a página inteira salta cada vez que o rato atravessa a barra. */
@media (min-width: 1080px) {
.app-shell { transition: padding-left .16s ease }
}
.module-sidebar.is-expanded .module-tab {
min-height: 40px; padding: 10px 12px; border-radius: var(--radius-md);
font-size: 13px; font-weight: 400; color: var(--tinta-600)
}
/* ⚠ A MESMA ERRATA, E ESTE SELETOR É QUE DECIDE. O comentário deste bloco já
avisa que ele carrega `.is-expanded` de propósito para vencer o papel 8 da
§2.1 — e por isso a correção da §2.1 sozinha não chegava aqui. Medi: a §2.1
dizia peso 600 e `--texto`, e a tela continuava a dar 500 e `--marinho`.
É a quarta vez que a especificidade decide sobre a ordem, e a lição é a
mesma de todas: a regra escrita depois não ganha por ser depois. */
.module-sidebar.is-expanded .module-tab.active,
.module-sidebar.is-expanded .module-tab[aria-selected="true"] {
/* ⚠⚠ 600 → 500, e é a QUINTA vez que a especificidade decide sobre a ordem.
Escrevi 500 em `.module-tab.active` e a tela continuou a dar 600, porque
esta regra tem uma classe a mais e ganha esteja onde estiver.
📌 E eu conhecia a lição — está escrita três linhas acima, por mim, hoje.
Conhecê-la não impediu de a repetir: o que impede é MEDIR DEPOIS, e foi o
comparador a devolver «peso 500 → 600» que me trouxe cá. */
font-weight: 500; color: var(--texto)
}
/* ── A ISENÇÃO DA EXTRAÇÃO (prancha `Passo20Isencao`) ──────────────────────
O riscado vai no RÓTULO do preço, nunca na coluna: a coluna conta
documentos, e riscar um número que continua verdadeiro fá-lo-ia parecer
anulado. */
.risco { text-decoration: line-through; color: var(--texto-fraco) }
/* ⚠ `--tinta-400` → `--texto-fraco`. A prancha risca o preço na MESMA tinta
do preço que fica; era o traço a dizer «este não vale», e não uma segunda
cor mais apagada a dizê-lo outra vez. */
tr.isen td, tr.isen td small { color: var(--verde-desconto) }
tr.isen td:last-child { font-weight: 500 }
.jn-precos { display: flex; flex-direction: column; align-items: flex-end; gap: 3px }
.jn-gratis { font-size: 12px; font-weight: 500; color: var(--verde-desconto) }
.jn-promo { margin: 10px 0 0; font-size: 12px; color: var(--texto-fraco) }
/* ⚠⚠ O CLARO NÃO MUDA E O ESCURO MUDA, e é o escuro que era o defeito.
`#00679C` é o valor CLARO do `--acento-escuro` — o mesmo literal, letra por
letra. Mas ele é metade de um par: sobre o papel escuro mede 3,06, abaixo do
piso de 4,5, e o token resolve-se lá para `#009FF0`, a 6,46.
⭐ É a mesma correção que a `.pr-selo` levou duas telas acima, pela mesma
razão e com os mesmos números. */
.jn-promo a { color: var(--acento-escuro) }
/* ── A GOTEIRA DO MENU DA CONTA (prancha `Passo19Conta`) ───────────────────
⚠ 18px reservados em TODAS as linhas, e não só nas que têm bandeira. Se só
as línguas recuassem, o menu teria DOIS começos de texto na vertical — e o
olho lê isso como duas listas encostadas, não como um menu.
16px e não 20: o tamanho sai da peça, e não da barra lateral. */
.mk-conta-glifo { width: 16px; height: 16px; flex: 0 0 18px; margin-right: 2px }
/* ⚠ `flex-start` nos itens que TÊM glifo. O painel usa `space-between`, que
serve às linhas de língua — bandeira e nome à esquerda, tique à direita —,
mas nos quatro itens de conta ele empurrava o texto para a borda oposta à
goteira. O resultado era o defeito que a goteira existe para evitar, agravado:
não dois começos de texto, mas um começo e um fim. */
.mk-conta a:has(.mk-conta-glifo),
.mk-conta button:has(.mk-conta-glifo) { justify-content: flex-start }
/* ⚠ O SÍMBOLO não é quadrado: 839×606, ou seja 22×15,9. Herdando a caixa de
20×20 dos glifos Lucide ele saía a 18 quadrado, e a marca deformava-se para
caber num molde que não é o dela. */
.module-tab-simbolo { width: 22px; height: 15.9px; flex: 0 0 22px }
/* Um ficheiro por modo, como o logótipo e o ícone da barra inferior. */
.sb-escuro { display: none }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .sb-claro { display: none }
:root:not([data-theme="light"]) .sb-escuro { display: block }
}
:root[data-theme="dark"] .sb-claro { display: none }
:root[data-theme="dark"] .sb-escuro { display: block }
/* ══ O CELULAR (pranchas `CelularTranscreverPardo` e a escura irmã) ═════════
⚠⚠ O CORTE AINDA NÃO FOI DESENHADO. Prancha nenhuma declara um breakpoint,
e eu não invento um: uso os 800px que o produto JÁ usa em todos os outros
blocos — a gaveta, a lateral estática, a trilha. Reutilizar o número que
existe é reversível; cunhar um novo seria uma decisão de desenho tomada por
quem não a pode tomar. Quando o valor vier, muda AQUI e nos outros blocos.
⚠ E a prancha é de 390px (iPhone). O Alan olha num Pixel 7, 412. Nada aqui
depende de largura fixa, mas os dois números não são o mesmo teste. */
.mk-baixo { display: none }
@media (max-width: 1079px) {
/* ── A BARRA INFERIOR ────────────────────────────────────────────────── */
.mk-baixo {
position: fixed; inset: auto 0 0 0; z-index: 60;
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: end; padding: 10px 6px 22px;
border-top: 1px solid var(--linha); background: var(--papel)
}
.mk-baixo-casa {
display: flex; flex-direction: column; align-items: center;
justify-content: flex-end; gap: 5px; height: 56px;
color: var(--tinta-500); text-decoration: none
}
.mk-baixo-casa svg { width: 21px; height: 21px; flex: none }
.mk-baixo-casa span { font-size: 10px; font-weight: 400; line-height: 1.1 }
/* ⚠⚠ A CASA ACESA ERA `--marinho` NOS DOIS MODOS — e o marinho não inverte.
Sobre a barra escura ele mede 1,15: azul escuro sobre chão azul escuro, e
o item onde a pessoa ESTÁ é justamente o que desaparecia (item 12 do Alan,
03/09/2026).
📌 O conserto já estava escrito vinte linhas abaixo, para o rótulo da casa
central, com esta mesma razão — e as outras quatro ficaram de fora. Quem
consertou olhou a peça que o Alan apontou nesse dia e não a família dela.
⛔ E a armadilha, que a frente de desenho mediu: o `--primario` INVERTE, e
por isso parece o candidato — mas como TINTA dá 2,38. «Inverter» e «servir
de tinta sobre o papel» são propriedades diferentes.
--marinho sobre o chão escuro ...... 1,15 ⛔
--primario como tinta ............. 2,38 ⛔
--texto ........................... 17,59 / 14,12 ✅ */
.mk-baixo-casa.on { color: var(--marinho) }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .mk-baixo-casa.on { color: var(--texto) }
}
:root[data-theme="dark"] .mk-baixo-casa.on { color: var(--texto) }
/* ⭐ A ELEVADA. O anel de 5px em `--papel` é o que a solta da barra: sem ele
o quadrado encosta na borda de cima e lê-se como botão colado. */
.mk-baixo-meio .mk-baixo-selo {
display: inline-flex; width: 58px; height: 58px; border-radius: 18px;
background: var(--primario); box-shadow: 0 0 0 5px var(--papel);
margin-bottom: -3px
}
.mk-baixo-meio img { width: 58px; height: 58px; border-radius: 18px }
/* Um ficheiro por modo, como o logótipo. */
.mk-baixo-meio .ic-escuro { display: none }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .mk-baixo-meio .ic-claro { display: none }
:root:not([data-theme="light"]) .mk-baixo-meio .ic-escuro { display: block }
}
:root[data-theme="dark"] .mk-baixo-meio .ic-claro { display: none }
:root[data-theme="dark"] .mk-baixo-meio .ic-escuro { display: block }
/* ⚠ O RÓTULO DA CENTRAL MUDA DE TINTA ENTRE OS MODOS, e as duas pranchas
dizem-no: `--marinho` no claro, `--texto` no escuro. Não é o mesmo valor a
inverter — o marinho não inverte, e medido dava 1,15 sobre a barra escura
contra os 11,27 dos rótulos vizinhos. Aqui a tinta é `--primario` no claro
e passa a `--texto` no escuro, porque é a ÚNICA das cinco que acompanha a
superfície da casa e não o chão da barra. */
.mk-baixo-meio span { font-weight: 500; color: var(--marinho) }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .mk-baixo-meio span { color: var(--texto) }
}
:root[data-theme="dark"] .mk-baixo-meio span { color: var(--texto) }
/* ⚠⚠ O SANDUÍCHE MORRE AQUI, no mesmo sítio em que a barra nasce. Ele era a
única navegação do celular; separar as duas coisas em dois commits deixaria
o produto sem navegação nenhuma pelo meio. */
.mk-burger { display: none !important }
.module-sidebar, .module-sidebar-toggle { display: none }
/* A moldura deixa de recuar para uma lateral que já não está, e passa a
reservar em baixo o que a barra ocupa. */
main.app-shell:has(> .mk-rodape-legal) .app-content { padding: 16px 16px 12px }
/* ⚠️ E A BARRA ACOMPANHA — o par é este, e estava partido.
A regra base do `.jn-pe` põe `padding-left: 96px`, e ela vive FORA de
media nenhuma: valia igual a 1440 e a 375. No celular a lateral não está
neste fluxo (ela é a `.mk-baixo`), e os 96px ficavam vazios — 26% da
largura de uma tela de 375, medidos.
⭐ O valor não vem do desenho: vem do IRMÃO. O comentário da regra base diz
«o par é 32px 96px no `.app-content` e o mesmo aqui; se um mudar, mudam os
dois» — e o `.app-content` já tinha mudado para 16 aqui dentro. */
/* ⚠️ E O LADO DIREITO FALTAVA, o que custou UMA LINHA INTEIRA. Medido a 390
em 04/09/2026, no passo 3 do fluxo:
o recuo era .... 18px 32px 18px 16px ← 32 à direita, 16 à esquerda
largura util ... 342
os dois botoes . «Voltar» 68 + gap 12 + «Continuar…» 263 = 343
⛔ Faltava UM PIXEL. E como o `.jn-pe` tem `flex-wrap: wrap`, o botão caía
para a linha de baixo e a barra passava de ~87 para 146px de altura —
59px perdidos numa tela de 812, por um pixel.
⭐ E a regra estava escrita aqui em cima: «o par é 32px 96px no
`.app-content` e o mesmo aqui; se um mudar, mudam os dois». O
`.app-content` mudou os DOIS lados para 16; esta só mudou a esquerda. A
emenda é aplicar a regra que o comentário já enuncia, e não uma nova.
⚠️ O `wrap` fica: ele é o que salva a barra quando o rótulo é comprido
noutra língua. O que não podia ficar era ele a disparar por assimetria de
recuo, que é defeito e não largura de texto. */
main.app-shell:has(> .mk-rodape-legal) > .jn-pe { padding-left: 16px; padding-right: 16px }
/* ⚠️ DOIS ALVOS ABAIXO DO DEDO. Medidos a 390 em 04/09/2026:
.mk-volta ...... 358 x 19 ← o elo de VOLTAR, em quatro telas
.button.small .. 136 x 30 ← «+ Acrescentar campo» e irmãos
O `.mk-volta` é `inline-block` com `font-size: .88rem`: a altura dele é a
da linha de texto e mais nada. 19px é menos de metade do dedo, e é a única
saída para trás destas telas.
⭐ `min-height` com `inline-flex`, e não `padding`: o padding empurrava o
conteúdo todo para baixo, e o que falta é ÁREA e não espaço. Assim a caixa
cresce à volta do texto, que fica onde estava.
⚠️ E o `.button.small` mantém o corpo pequeno de propósito — é uma ação
secundária e tem de o parecer. O que muda é a área de toque, não o tamanho
aparente da letra. No computador continuam a valer os 30px de
`styles.css`, que lá são de rato e não de dedo. */
.mk-volta { display: inline-flex; align-items: center; min-height: 44px }
.button.small { min-height: 44px }
/* 115 = os 89 que a barra mede (10 + 56 + 22, medidos no vivo) mais os 26 do
espaçador que a prancha põe entre o conteúdo e ela. Com 104 sobravam 15px
no fim da rolagem — não tapava, mas encostava. */
main.app-shell:has(> .mk-rodape-legal) { height: auto; min-height: 100vh; padding-bottom: 115px }
/* ── O TOPO ──────────────────────────────────────────────────────────── */
.site-header .brand-row { height: 60px; padding: 0 16px }
.site-header .logo-box img { width: 128px }
/* O saldo empilhado da prancha: rótulo versalete de 9px, número de 14. */
/* ⚠️ `--tinta-500` dava 4,33 sobre o cabeçalho — abaixo do piso, e num texto
de NOVE pixels. Medido a 390 em 04/09/2026:
--tinta-500 #5C6C93 sobre #F0E9DF -> 4,33 ⛔
--texto-fraco #475A85 sobre #F0E9DF -> 5,68 ✅
É o mesmo defeito do `.tpc-campos`: um degrau da RAMPA a servir de texto
sobre uma superfície mais escura que o papel. A rampa não sabe sobre que
chão vai cair. */
.hd-saldo-estreito .hd-saldo-rotulo { font-size: 9px; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase; color: var(--texto-fraco) }
.hd-saldo-estreito b { font-size: 14px; font-weight: 500; color: var(--texto); line-height: 1.2 }
.mk-avatar { width: 32px; height: 32px }
/* ── O CABEÇALHO: 25px e 14px, e é por isso que cabem numa linha ─────── */
.app-content .page-heading { flex-direction: column; align-items: stretch; gap: 16px }
.ph-titulos { gap: 4px }
.page-heading h1 { font-size: 25px }
.ph-titulos .jn-titulo { font-size: 14px }
/* ── A TRILHA: QUATRO bolas de 20px, sem rótulo, fios ELÁSTICOS ───────
⚠ Ao contrário do computador, onde os fios são 20px fixos. Aqui eles
esticam porque a trilha tem de caber na largura que houver.
⚠⚠ A QUINTA COLUNA SAI, e isto é inferência e não declaração: a
`CelularResultadoPardo` não desenha trilha nenhuma, logo «Concluído» não é
passo da trilha do celular — é o destino, e chegar lá tira-a do ecrã.
Ficam Documentos · O que fazer · Tipo · Confirmar. Se o desenho desmentir,
muda esta linha e mais nada. */
.jn-trilha { gap: 7px }
.jn-col { flex: 1 1 0; padding: 0; gap: 0; min-width: 0 }
/* ⚠ CINCO POSIÇÕES NO CELULAR, as mesmas do computador. Estiveram quatro, e a
razão parecia boa: a prancha do celular desenhava «1 2 3 4», a tela de
resultado não desenhava trilha nenhuma, e a frente de desenho confirmou-o
por texto. ***A prancha é que estava errada***, e o Alan corrigiu-a em
02/09/2026: «o stepper são 5, precisa manter as 5 etapas do nosso fluxo».
Não foi defeito de implementação nem leitura errada de ninguém — foi o
desenho a dizer uma coisa e o dono a querer outra. Fica escrito para quem
comparar a folha com a prancha antiga.
A aritmética a 412: 5 bolas de 20 = 100px, sobram 280 para 4 vãos, ~70px
cada. Os fios são `flex: 1 1 0` e encolhem sozinhos.
A última coluna não reclama a sua fatia — senão a quinta bola ficaria
sentada no início dela, longe da borda. O fio de saída dela já não se
desenha: é o `i.vazio`, escondido na regra do computador. */
.jn-col:last-child { flex: 0 0 auto }
.jn-rot { display: none }
.jn-bola { width: 20px; height: 20px; font-size: 10.5px }
.jn-linhas i { order: 3; flex: 1 1 0; width: auto; height: 1px }
.jn-linhas i:first-child, .jn-linhas i.vazio { display: none }
/* ── OS DOIS BOTÕES: «Tirar foto» PRIMEIRO e primário ─────────────────
⚠ Ao contrário do computador, e não é engano da prancha: é a mão que
segura o telefone. Quem está no celular tem a câmara consigo e o
explorador de ficheiros longe; no computador é o inverso. */
/* ⚠️ E A FILA OCUPA A LARGURA TODA — itens 9 e 10 do Alan, e o defeito era
do CONTENTOR e não da divisão entre os dois botões.
Medido a 375px, antes: na zona VAZIA a fila media 217px de 375 e cada
botão ficava com ~103 — «o Foto está espremido». Com documentos ela já
media 301, e por isso o mesmo par parecia certo numa tela e apertado na
outra: `flex: 1 1 0` divide bem o que houver, e o que havia era pouco.
A causa: a zona vazia é `align-items: center`, e um filho de coluna
centrada encolhe até ao conteúdo. `align-self: stretch` desfaz isso só
para esta fila — o robô e o texto continuam centrados. */
.mk-solta-acoes { gap: 10px; flex-wrap: nowrap; align-self: stretch; width: 100% }
.mk-solta-acoes .button { flex: 1 1 0; padding: 16px 12px; border-radius: 10px;
font-size: 15px; font-weight: 500; gap: 9px }
.mk-solta-acoes .button.primary { order: 2; background: none;
border: 1px solid var(--tinta-300); color: var(--tinta-800) }
.mk-solta-acoes .button.ghost { order: 1; background: var(--primario);
border: 0; color: var(--sobre-primario) }
/* ── O RODAPÉ DE AÇÃO ────────────────────────────────────────────────
Geometria da prancha: `space-between`, filete por cima, recuo de 12.
⚠⚠ DIVERGE DA PRANCHA POR DECISÃO DO ALAN, 02/09/2026. A prancha põe à
esquerda uma contagem («6 documentos») e à direita o botão, sem o
«Descartar». Ele viu-o a funcionar no celular e mandou mantê-lo:
«o botão "descartar estes documentos" está funcionando no modo celular,
mantenha o botão».
Está escrito para a próxima varredura não o «consertar» de volta — é a
segunda divergência deliberada desta folha, ao lado da do `--tinta-50` no
botão preso.
Até lá os dois botões ficam, e `flex-wrap` impede o que eu media antes: o
primário com a borda direita em 408 numa tela de 390, ou seja, meio botão
fora do ecrã. Envolver é feio; sair da tela é pior. */
.jn-pe {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 12px; padding-top: 12px;
border-top: 1px solid var(--linha)
}
.jn-pe .button { padding: 15px 20px; border-radius: 10px; font-size: 15px; font-weight: 500 }
}
/* ══ A TELA 2, medida na prancha `Passo2OQueFazer` ═════════════════════════
⚠ O bloco das escolhas alinha à ESQUERDA, por baixo do título — não é só
uma largura. A ficha diz «680px e não a do miolo» e eu li isso como medida;
é medida E LUGAR. Medido: o título começa em x 96 e o bloco começava em 405.
📌 Um número numa ficha descreve uma medida; a prancha descreve um lugar.
Ler o número não é ver o lugar — e a largura sozinha dava 705 contra 680,
que parecia quase certo. «Quase certo» passa despercebido. */
.jn-meio {
/* ===== a jornada: as regras que faltavam (D-205) =====
Sete classes estavam escritas nos templates e não existiam em folha nenhuma,
e a tela "O que fazer" mostrava um `` sem estilo — uma seta preta
ocupando o cartão inteiro. Vieram do desenho, sem retoque: é ele que manda
quando ele e qualquer outra coisa discordam. */
max-width: 680px;
margin-inline: 0;
}
.jn-opcoes > .jn-op.on { background: var(--tinta-50) }
.jn-opcoes > label.jn-op { border-style: dashed; border-color: var(--tinta-400) }
/* O tique nu da primeira: sem caixa, sem fundo, e o traço na cor da marca. */
.jn-op.on > .jn-marca {
width: 20px; height: 20px; border: 0; background: none; border-radius: 0
}
/* ⚠ `--texto` e não `--marinho`: SÉTIMA da mesma família. O tique não tem fundo
próprio — assenta no `--tinta-50` do cartão, que no escuro é `#0C1B3E` —, e o
marinho não inverte: no escuro ele desaparecia.
⚠⚠ E isto NÃO parte a §1.10, que proíbe a tinta mudar entre ESTADOS. Ela
continua igual em todos os estados; o que muda é o MODO. Ter `--marinho`
legível num modo e invisível no outro já era a tinta a variar — só que por
acidente, e sem par. */
.jn-op.on > .jn-marca svg { width: 20px; height: 20px; stroke: var(--texto); stroke-width: 2.4; display: block }
/* A caixa da segunda: quadrada, raio 5. */
.jn-op:has(input) > .jn-marca { width: 20px; height: 20px; border-radius: 5px }
/* ── OS SELOS ─────────────────────────────────────────────────────────────
Pílulas a cavalo na borda de cima, a −8px. Elas dizem em duas palavras o que
a forma do cartão já diz em silêncio — e é de propósito: quem não lê a forma
lê o selo, e quem lê a forma tem-no confirmado. */
.jn-op {
display:flex;
align-items:center;
width:100%;
cursor:pointer;
font:inherit;
font-size:.97rem;
text-align:left;
background:transparent;
color:inherit;
/* ── OS DOIS CARTÕES ──────────────────────────────────────────────────────
⚠⚠ A PRIMEIRA NÃO É UMA CAIXA DE SELEÇÃO. Ela nunca se desmarca — o mínimo
é sempre «só transcrever», e não existe estado «nenhuma escolhida». Por isso
a marca dela é um TIQUE NU, sem caixa à volta: uma caixa promete que se pode
desmarcar, e um círculo promete que se escolhe UMA das duas.
O produto tinha dois círculos, e dois círculos dizem «escolha uma destas» —
a forma estava a mentir sobre o que a peça faz.
E a segunda é QUADRADA de raio 5, que é o que o sistema usa para caixa de
seleção. O tracejado da borda dela diz «opcional» sem uma palavra, e é o
mesmo tracejado da área de largar da tela 1: no sistema, tracejado = ainda
não é definitivo. */
padding: 16px;
border-radius: 12px;
border: 1px solid var(--tinta-300);
gap: 12px;
position: relative;
}
.jn-selo {
position: absolute; top: -8px; left: 16px; padding: 3px 9px; border-radius: 999px;
font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase
}
/* ⚠ Os dois selos são tinta CLARA sobre uma cor, e não cor sobre o papel. Medi
na prancha: «SEMPRE INCLUÍDA» sobre `--marinho`, «OPCIONAL» sobre
`--tinta-500`. O segundo estava ao contrário — `--tinta-500` sobre `--papel`
—, e era a «cor errada do selo» que o Alan reportou.
⚠⚠ E OS DOIS NÃO LEVAM A MESMA TINTA, o que parece incoerência e não é.
Escrevi `#fff` nos dois, como a prancha os desenha, e medi:
«OPCIONAL» #fff sobre --tinta-500 .... 5,22 claro · 1,67 ESCURO ⛔
--papel ................... 4,89 claro · 11,27 escuro ✅
«SEMPRE» #fff sobre --marinho ...... 16,38 nos dois ✅
--papel ................... ~1,1 no escuro ⛔
📌 A razão é a superfície de cada um. `--marinho` é MARCA e não inverte: a
pílula fica escura nos dois modos, e a tinta dela é branca nos dois. O
`--tinta-500` INVERTE — é `#5C6C93` no claro e `#CBC8C3` no escuro —, e uma
tinta fixa sobre uma superfície que vira é o defeito de sempre, ao contrário.
⚠⚠ E o `#fff` da prancha não estava errado: num desenho que só tem modo
claro, `#fff` E `--papel` são a mesma cor. O que a prancha queria dizer era
«a cor da página, recortada na pílula» — e é `--papel` que diz isso nos dois.
📌 A tinta segue a SUPERFÍCIE DELA, e não uma regra da tela. */
.jn-op.on > .jn-selo { color: var(--sobre-primario); background: var(--marinho) }
.jn-op:has(input) > .jn-selo { color: var(--papel); background: var(--tinta-500) }
/* ── O RODAPÉ DE AÇÃO DO PASSO ────────────────────────────────────────────
⚠ Ele NÃO é o rodapé da aplicação: «Documentos legais · Medição de uso» está
no pé da moldura e é outro. Este pertence ao passo, e o filete por cima é o
que os separa a olho. */
/* (A regra do filete subiu para `.jn-pe`, que serve as duas telas: medi as duas
pranchas e elas dão-lhe a mesma forma. O que continua a ser próprio da tela 2
é o PAI — lá ele vive dentro do bloco central de 680px, e não do miolo.) */
/* ══ A FOLHA DO REGULAMENTO NO CELULAR ═════════════════════════════════════
⚠⚠ E a primeira coisa a dizer é o que NÃO estava partido. O mecanismo existe
e funciona: o link tem `data-legal`, o `produto.js` busca o corpo ao banco —
à MESMA rota que a página pública serve — e mostra-o. O que faltava era a
APRESENTAÇÃO no celular, e o `_legal.html` já o dizia por escrito: «a folha
do celular não é desta frente e está desenhada noutra».
📌 Não era «está partida» nem «nunca existiu»: era uma terceira coisa —
feita por dentro e por desenhar por fora.
⚠ E `.doc-caixa` estava na marcação sem existir em folha nenhuma. Mais uma
classe escrita contra o vazio; passa a valer aqui.
O DESENHO, aprovado pelo Alan: ela SOBE DO FUNDO e para ANTES DO TOPO, e a
faixa que sobra em cima mostra o passo por baixo. É a faixa que diz «isto
está por cima do que você estava a fazer» — sem ela a folha lê-se como uma
página nova, e a pessoa perde o sítio onde estava.
⚠ No computador nada disto se aplica: lá a caixa é centrada e está certa. */
@media (max-width: 1079px) {
.mk-modal:has(.doc-caixa) { place-items: end stretch; padding: 0 }
.doc-caixa {
width: 100%;
/* ⭐ A FAIXA são estes 96px, e ela é o componente. `max-height` e não
`height`: um regulamento curto não tem de encher a tela para provar que
é uma folha. */
max-height: calc(100dvh - 96px);
display: flex; flex-direction: column;
border-radius: 18px 18px 0 0; padding: 0
}
/* O corpo rola; o cabeçalho e o pé não. Numa folha que sobe do fundo, um pé
que role leva o «Fechar» para fora do alcance do polegar. */
#modal-legal-corpo {
overflow-y: auto; -webkit-overflow-scrolling: touch;
padding: 4px 20px 18px; min-height: 0
}
/* ⚠ `flex-shrink: 0` nos dois: numa coluna flexível o padrão é encolher, e
um cabeçalho de 44px espremido a 12 continua lá — apenas ilegível. */
.doc-caixa > .mk-modal-pe { flex-shrink: 0; padding: 12px 20px 18px }
/* A PEGA, e ela não é decoração: é o que diz que se puxa para baixo. Fica
dentro de uma área de 44px para o dedo a apanhar sem pontaria. */
.doc-caixa::before {
content: ''; flex-shrink: 0; align-self: center;
width: 38px; height: 4px; margin: 14px 0 10px;
border-radius: 999px; background: var(--tinta-300)
}
}
/* O link do regulamento vai para a LINHA DE BAIXO, por pedido do Alan.
⚠ `display: block` e não um ``, e o filete é do CARTÃO que o contém — não
do ``. Escrevi primeiro `:has(.mk-res-campos)`, uma classe que não existe,
e depois medi onde o `id` vive de facto. */
/* ⚠⚠ `--ciano` e NÃO `--acento`: a prancha escreve `var(--acento)`, e esse token
NÃO EXISTE nesta folha — chama-se `--ciano`, com `--accent` por apelido.
E o modo como isto falhou é o que interessa: uma `var()` indefinida torna a
declaração inválida NO TEMPO DE CÁLCULO, e a propriedade cai para o valor
inicial — `border-left` deu `0px none`. Não há erro, não há aviso, e o
seletor casa: `querySelector` achava o elemento e o filete não existia.
📌 Copiar um nome de token da prancha sem confirmar que ele existe aqui é a
mesma família de «medi» sem dizer o quê. */
.mk-res .mk-bloco:has(#dados-extraidos) { border-left: 1px solid var(--ciano) }
/* O seletor de PAÍS com bandeira — item 13 do Alan, 02/09/2026, e desenhado
para ficar igual ao DDI que está logo acima dele.
⚠ A bandeira POUSA sobre o campo e não entra no fluxo: o `` continua
a ser o do sistema, com o seu foco, a sua busca por digitação e a sua roda no
celular. O que muda é a folga da esquerda, que abre espaço para ela.
📌 As medidas são as do DDI — 18×13 e raio 2 —, e não outras parecidas. Duas
bandeiras a dois tamanhos, uma por cima da outra na mesma coluna, é o tipo
de diferença que ninguém consegue justificar depois. */
.pais-alvo { position: relative; display: block }
.pais-alvo img.fl {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
width: 18px; height: 13px; border-radius: 2px; object-fit: cover;
pointer-events: none
}
/* Só recua o texto quando há bandeira à vista. Sem país escolhido a imagem tem
`hidden`, e um recuo sem nada dentro dele seria um campo torto sem razão. */
.pais-alvo:has(img.fl:not([hidden])) select { padding-left: 38px }
/* ===== os blocos de FORMULÁRIO em duas colunas =====
*
* ⚠⚠ A `Passo14MeusDados` e a `Passo8Faturamento` desenham os campos em DUAS
* colunas de 545px, e o produto empilhava-os numa só. Não apareceu na lista
* como «disposição»: apareceu como catorze diferenças de LARGURA, uma por
* rótulo, porque o comparador mede caixas e não intenções. Foi preciso olhar
* o x de cada campo na prancha para ver que havia duas colunas.
*
* prancha x=276 w=545 | x=835 w=545 Nome | Tipo de conta
* produto x=293 w=1090 Nome
* Tipo de conta
*
* 📌 Os pares saem da ORDEM e de mais nada — dois campos seguidos partilham a
* linha —, e é por isso que uma grelha resolve isto sem tocar no HTML de cada
* campo. O título do bloco e a nota atravessam as duas colunas, como na
* prancha.
*
* ⛔ CLASSE PRÓPRIA, e não o `.mk-bloco`: esse veste DEZOITO templates, e só
* dois deles são desta frente. Uma grelha no `.mk-bloco` punha duas colunas na
* tela de tipos, na de resultado e na de suporte, que não são minhas e que
* ninguém teria olhado. */
.mk-campos-2col {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px;
align-items: start
/* ⚠⚠ SEM `max-width`, e é uma decisão do Alan CONTRA a prancha (item 4a,
03/09/2026): «a caixa da foto tem largura diferente das outras — todas à
largura inteira, alinhadas».
Eu tinha posto 1120px, que é a medida da prancha: duas colunas de 545 mais
30 de intervalo, dentro de uma tela de 1440. Mas o conteúdo do PRODUTO tem
outra folga lateral e mede 1312 — e a caixa da foto, que não é uma grelha,
ficava nos 1312 e as outras três nos 1120. Três cartões alinhados e um
mais largo, um por cima do outro.
📌 A prancha desenha a MEDIDA; o Alan pediu o ALINHAMENTO. Prender a
medida quebrava o alinhamento, que é o que se vê. As colunas passam a ser
metade do que houver, e a proporção do desenho mantém-se. */
}
.mk-campos-2col > .mk-bloco-topo,
.mk-campos-2col > .mk-meta,
.mk-campos-2col > .md-lead { grid-column: 1 / -1 }
/* O que não é campo — avisos, botões, blocos inteiros — também atravessa: só
o `.login-field` é que ocupa meia linha. */
.mk-campos-2col > *:not(.login-field) { grid-column: 1 / -1 }
/* ⛔ E O `margin-top` DE IRMÃO SAI, que era o desalinhamento das duas colunas
(item 4b e 4c do Alan).
O `styles.css` tem `.login-field + .login-field { margin-top: 20px }` — o
espaço entre campos EMPILHADOS. Numa grelha, o primeiro campo de cada linha
não tem irmão imediatamente antes na mesma coluna, mas o segundo TEM: ele
levava os 20px e descia sozinho.
Nome completo topo = 409
Tipo de conta topo = 429 ← os 20px do irmão
📌 Quem espaça agora é o `gap`, que é o que uma grelha usa; o `margin` era a
ferramenta da pilha e sobreviveu à troca de disposição. */
.mk-campos-2col > .login-field + .login-field { margin-top: 0 }
/* Uma coluna no que for estreito. O ponto de corte é o do resto da folha para
esta faixa, e não um novo: catorze pontos de corte já são sedimento demais
(INVENTARIO-DO-DESIGN §1), e acrescentar o décimo quinto por causa desta
grelha era pagar duas vezes. */
@media (max-width: 700px) {
.mk-campos-2col { grid-template-columns: 1fr }
}
/* O rótulo ocupa a LARGURA do campo, como na prancha — lá ele mede 545, a
coluna inteira; aqui media 92, o tamanho da palavra.
*
* ⚠ Não muda nada ao olho, e é por isso que precisa de razão escrita: um
* rótulo em bloco tem a área de clique da coluna toda, e um rótulo em linha
* tem a da palavra. O `` leva o foco ao campo, e essa diferença
* sente-se com o rato e não se vê na captura.
*
* ⛔ Preso à grelha desta frente. O `.login-field` veste também as telas de
* entrada, que são de outra — e eu já colidi hoje uma vez por não olhar. */
.mk-campos-2col .login-field > label > span { display: block }
/* ── AS TELAS DO FLUXO, NO CELULAR: duas barras e um miolo que rola ──────────
Pedido do Alan (02/09): «a barra de botões fixa em baixo, logo acima do menu,
e a rolagem acontece ENTRE a barra de cima e a barra de botões» — e a topbar
também presa. É uma coisa só, e faz-se no molde, não por tela.
⚠️ O ESCOPO É A TRILHA, e não a barra de botões. Escolher por `.jn-pe`
apanharia «Meus dados», «Faturamento» e as duas de tipo, que têm rodapé de
ação e NÃO são do fluxo — quatro telas que ninguém pediu a rolar por dentro.
⚠⚠ ERRATA, 03/09/2026: este parágrafo argumentava que o escopo devia ser a
TRILHA e não a `.jn-pe`, porque `.jn-pe` apanharia «Meus dados»,
«Faturamento» e as duas de tipo. O argumento estava certo QUANDO foi escrito
e caducou: o Alan pediu a barra fixa nas duas de tipo, e elas não têm trilha.
⭐ O marcador passou a ser `.jn-pe-fixa`, que é EXPLÍCITO — não é `.jn-pe`
(que apanharia demais) nem a trilha (que apanha por vizinhança). Quem quer a
barra pinada põe a classe; «Meus dados» e «Faturamento» continuam de fora
porque não a põem.
📌 A trilha nunca foi a razão de nenhuma destas regras: era o bilhete de
identidade das telas do fluxo, e serviu enquanto fluxo e barra pinada foram
a mesma lista. O texto abaixo fica como estava, e diz por quê:
`body:has(.jn-trilha)` dizia o que a regra QUERIA dizer («as telas do fluxo»);
`.jn-pe` diria só o que ela toca. Não é a mesma coisa.
⭐ SEM `position: fixed` E SEM UM ÚNICO NÚMERO. A pilha do canto de baixo é
ordem de irmãos — miolo, ações, menu —, e ordem de irmãos não tem `z-index`,
não tem aritmética e não se desalinha. A alternativa era prender a `.jn-pe` e
calcular o `bottom` a partir da altura do menu, que ninguém escreveu: um
número somado de `padding` + ícone + rótulo nasce errado e envelhece pior.
📌 E dissolve as duas armadilhas que a regra do `.mk-rodape-legal` nomeou ao
explicar por que NÃO prendeu o rodapé — «cobriria conteúdo no fim da rolagem
das telas longas» e «passaria a disputar o canto de baixo com a faixa do
consentimento». Sem `fixed` não há nada por cima de nada. As duas regras
leem-se juntas.
⚠️ O `.mk-baixo` deixa de ser `fixed` AQUI DENTRO, e só aqui: fora do fluxo
ele continua exactamente como estava.
⚠️ E o consentimento continua `fixed`, POR CIMA das duas barras: nenhuma ação
primária fica atrás de um aviso. A faixa é uma interrupção temporária e
responde-se uma vez; o botão é o trabalho — e um botão que não se vê é
indistinguível de um botão que não existe. */
@media (max-width: 1079px) {
/* ⚠⚠ SEGUNDO MARCADOR, 03/09/2026 — e eu quase derrubei a razão do primeiro.
A nota acima diz, com todas as letras, que o escopo NÃO é `.jn-pe` porque
isso apanharia «Meus dados», «Faturamento» e as duas de tipo — «quatro
telas que ninguém pediu a rolar por dentro». Eu ia trocar por `.jn-pe` e
escrever que a trilha era um proxy quebrado.
⭐ Metade disso é verdade. A trilha É um proxy: ela nunca foi a razão de
nenhuma destas regras — era o bilhete de identidade das telas do stepper,
que por acaso eram as únicas com barra a pinar.
📌 Mas a outra metade continua de pé, e foi o que me fez parar: DUAS das
quatro telas que a nota exclui continuam excluídas. O Alan pediu a barra
fixa nas de EDIÇÃO DO TIPO, e não em «Meus dados» nem em «Faturamento».
Trocar o marcador por `.jn-pe` mudava quatro telas para atender duas.
⭐ Então o marcador novo é EXPLÍCITO: `.jn-pe-fixa`, posto nos dois
templates de edição. Ele diz o que a regra quer — «esta barra pina» — em
vez de adivinhar por um vizinho.
⭐ DÍVIDA PAGA em 03/09/2026. Aqui esteve escrito que eram DOIS marcadores
para UM comportamento, e que o certo seria dar o `.jn-pe-fixa` aos templates
do stepper e apagar o `.jn-trilha`. Foi feito: os quatro templates com barra
põem a classe, e estas regras têm um marcador só.
📌 A dívida foi nomeada no mesmo commit em que foi criada, e paga duas
horas depois. Escrevê-la foi o que a fez ser paga — uma dívida que ninguém
anota não é encontrada por quem vem depois: é herdada.
⚠️⚠️ E ANTES DE APAGAR ESTE MARCADOR, LEIA ISTO — ele NÃO segura só a
barra de ações.
Segura o bloco inteiro do celular para estas telas: a altura de `100dvh`,
o `overflow: hidden` que tira a rolagem do `body`, o miolo que passa a ser
o único a rolar, o menu que deixa de ser `fixed` e vira o último irmão, e
a topbar que sai do `sticky`. Tirar o marcador não deixa a barra solta:
devolve a tela inteira ao comportamento antigo, de uma vez, e nas telas
que já estavam certas.
⭐ Isto quase aconteceu em 03/09/2026: uma frente ia unificar o marcador
apagando o antigo ANTES de as barras da quarta tela terem sido içadas — e
aquela tela teria perdido o bloco todo, não só a barra. Quem viu foi ela
própria, ao contar as `.jn-pe` por arquivo a pedido de outra frente. **A
dependência existia e não estava escrita em lugar nenhum: está agora.**
📌 E o comentário mora AQUI e não na regra da barra de propósito: quem vai
apagar um marcador abre a regra que o define, e não as que o usam. */
/* ⛔⛔ O DEGRAU DE ALTURA, 05/09/2026 — ordem do Alan: «conserte as 5 telas».
⭐ *Abaixo de certa altura a tela deixa de ser aplicativo e vira PÁGINA:
rola inteira, e a barra de ações vai no fim do conteúdo em vez de grudada.*
Foi essa a descrição que ele aprovou, e é este bloco que a cumpre.
O QUE ELE CONSERTA, medido por acto (`elementFromPoint` no centro do botão,
sem rolar e depois de rolar até ao fim) nas cinco telas com barra pinada:
844x330 o 13 deitado com as barras do Safari .... ⛔ coberto
667x300 o SE deitado com as barras .............. ⛔ coberto
844x390 o 13 deitado sem barras ................. ok
⚠️ E não era corte: era COBERTURA. O `main` encolhe — pode, tem
`min-height: 0` —, a barra dentro dele mede 87 e não encolhe, transborda o
pai, e o `nav.mk-baixo` vem a seguir com `z-index: 60` e pinta por cima. A
coluna somava 358 num corpo de 330 com `overflow: hidden`, e o `hidden`
é o que faz não haver rolagem que traga o botão de volta.
⭐⭐ E o pior não era «não se alcança»: era que os DOIS EXTREMOS do gesto
falhavam. Sem rolar, o botão está sob o menu; rolando até ao fim, está sob
o cabeçalho. Só uma posição do meio o entregava — a que um dedo não sabe
procurar. **Difícil de um modo que parece impossível.**
═══ POR QUE 520, e não 480 nem 560 ═══
O limiar medido de 4 em 4 px, nas quatro larguras:
390 e 375 (em pé) .... cabe a 484, perde a 480
844 e 667 (deitado) .. cabe a 364, perde a 360
⛔ 480 é onde QUEBRA, não onde é seguro — o degrau tem de ficar acima do
pior caso, e o pior caso é 484. ⭐ 520 dá 36px de folga sobre ele.
⚠️ E o teto do degrau é o que eu mais temi, porque estragar o que funciona é
pior do que não consertar: um iPhone SE em pé com as barras do Safari fica
acima dos 550, e o 13 acima dos 670. **Os dois continuam em modo
aplicativo, com a barra grudada, que é o que a arquitetura lhes dá.** Só o
deitado — e um telefone antigo muito curto — cai em modo página.
⚠️⚠️ E REPARE NO QUE FICA DE FORA DO DEGRAU, logo abaixo: as regras que
TIRAM coisas do `fixed` valem em TODAS as alturas. Só as que CONSTROEM o
aplicativo — a altura de `100dvh`, o `overflow: hidden`, o miolo como único
a rolar — é que ficam atrás dele. Pô-las todas juntas devolvia o menu ao
`position: fixed` em modo página, e ele voltava a cobrir o fim da página —
que é onde a barra de ações passa a estar. **O conserto teria reposto o
defeito por outra porta.** */
@media (min-height: 520px) {
body:has(.jn-pe-fixa) {
height: 100dvh;
display: flex;
flex-direction: column;
overflow: hidden;
}
body:has(.jn-pe-fixa) > main.app-shell {
/* `min-height: 0` é o que faz o miolo poder ENCOLHER: sem ele um filho flex
não desce abaixo do seu conteúdo, o `overflow-y` nunca chega a valer, e a
página volta a rolar toda — com as barras a passear junto. */
/* ⚠️ `main.app-shell` E NÃO SÓ `main`, e a razão é medida e não estética.
Há uma regra vizinha — `main.app-shell:has(> .mk-rodape-legal)` — com
`min-height: 100vh` e `padding-bottom: 115px`. Ela ganha a um `main` nu por
especificidade, e com ela o miolo não encolhe: medido a 375×812, ele saía
com 812 de altura e EMPURRAVA as duas barras para fora do ecrã — a de ações
a começar em 876 e o menu em 939, os dois abaixo da dobra. A tela parecia
inteira e o `Confirmar` não existia.
⭐ E repare no que o `padding-bottom: 115px` é: o espaço reservado para o
menu ENQUANTO ELE ERA `fixed` — o número que este desenho existe para não
precisar. Aqui ele vai a zero, e é essa a prova de que a ordem de irmãos
dispensa a aritmética em vez de a esconder. */
/* ⚠️ `gap: 0` — e a razão inteira, porque este número tem história.
O `.app-shell` leva `gap: 14px` de `styles.css:1312`, escrito para uma
GRADE (`grid-template-columns: 1fr` na mesma linha) e para separar a
LATERAL do conteúdo quando ela empilhava por cima dele no celular.
⛔ Hoje esse par não existe: a lateral é `display: none` no celular
(`produto.css:2777`) e o `.app-shell` deixou de ser grade — o
`grid-template-columns` ficou INERTE e o `gap` não, porque vale em flex.
Medido: nas telas do fluxo o `main` tem exactamente DOIS filhos visíveis,
o miolo e a barra, e os 14px caem entre eles.
📌 O que custava: no estado crítico da `confirmar` a 375×390 sobravam 42px
para o miolo e ele media 28 — o `gap` comia um terço do que restava, numa
tela em que o cliente veio confirmar, não pode, e precisa de perceber
porquê.
⚠️ E por isso vai a ZERO só AQUI, e não na regra de origem: fora do fluxo
o mesmo `gap` ainda separa o `.app-content` do rodapé legal, entre 701 e
1079px, e apagá-lo lá mexeria em telas que ninguém pediu para olhar. */
gap: 0;
display: flex;
flex-direction: column;
flex: 1 1 auto;
height: auto;
min-height: 0;
padding-bottom: 0;
overflow: hidden;
/* quem rola é o miolo, não o `main` */
}
/* ⚠️ A BARRA É FILHA DO `main` E NÃO IRMÃ DELE — mudou de sítio em 03/09.
Fora do `main` ela servia o celular e PARTIA o computador: perdia a coluna
do conteúdo e os botões iam para os cantos da janela, por cima do rodapé.
Aqui os dois modos usam a mesma propriedade — o `main` é coluna de altura
limitada, o miolo é o único com `overflow-y`, e a barra vem a seguir sem
encolher. */
body:has(.jn-pe-fixa) main.app-shell > .app-content { flex: 1 1 auto; min-height: 0; overflow-y: auto }
body:has(.jn-pe-fixa) main.app-shell > .jn-pe,
body:has(.jn-pe-fixa) > .mk-baixo { flex: 0 0 auto }
}
/* ⭐ FIM DO DEGRAU. Daqui para baixo vale nas duas alturas, e é de propósito:
são as regras que tiram peças do `fixed` e as põem no fluxo. Em modo página
elas são ainda MAIS necessárias do que em modo aplicativo. */
/* O rodapé legal não entra na pilha do celular: são três barras num ecrã de
812, e a terceira come o miolo. Ele já vive no menu de baixo. */
body:has(.jn-pe-fixa) .mk-rodape-legal { display: none }
body:has(.jn-pe-fixa) > .mk-baixo { position: static; inset: auto }
/* A topbar deixa de precisar do `sticky`: irmão do meio que rola é o `main`,
e ela está fora dele. ⚠️ `sticky` e `fixed` não são a mesma palavra trocada
— o `sticky` ocupa lugar no fluxo e o `fixed` sai dele —, e aqui não é
preciso nenhum dos dois. */
body:has(.jn-pe-fixa) .site-header { position: static }
/* ⚠⚠ A FAIXA DO CONSENTIMENTO COBRIA A BARRA DE AÇÕES, e isso é defeito —
não uma decisão a rever. A regra escrita ao lado é literal:
«nenhuma ação primária fica atrás de um aviso»
e «por cima das duas barras» ali quer dizer MAIS ALTO NA PILHA, não
sobreposto. Medido a 390×844, antes: a faixa começa em 600, a barra corre
de 668 a 755 — o «Salvar» inteiro atrás do aviso.
⚠ E não é só das minhas telas: medi o stepper na mesma largura e a barra
dele (769–832) também ficava atrás. A pilha nunca tinha sido aplicada a
NENHUMA das duas famílias; eu só a encontrei porque as minhas telas eram
novas e eu fui olhar.
📌 O MECANISMO É O QUE JÁ EXISTE, e não um segundo: `body:has(.mk-consentimento)`
com o mesmo par 138/258 que o rodapé legal e o aviso de salvo já usam. Conferi
que o número serve antes de o reusar — a faixa mede 244px a 390, e a regra
abaixo de 560 reserva 258. Sobram 14 de folga.
⚠ Por que `padding-bottom` no `body` e não `bottom` na barra: a barra não é
`fixed` — ela é item de uma coluna. Encurtar a coluna sobe as duas barras
de uma vez, e o menu também não deve ficar atrás do aviso. Com
`box-sizing: border-box` e `height: 100dvh`, o recuo tira do que sobra. */
body:has(.jn-pe-fixa):has(.mk-consentimento) { padding-bottom: 138px }
/* ⚠⚠ O DEGRAU DOS 560 TEM DE VIR DEPOIS, e eu tinha-o posto antes.
Escrevi-o junto das regras vizinhas que já usam o par 138/258 — o que
parecia arrumação — e as duas ficaram com a MESMA especificidade em
ficheiro, com a larga mais abaixo. Resultado medido a 390: o `body` levava
138 onde devia levar 258, e a barra continuava atrás da faixa.
📌 Uma regra mais específica na INTENÇÃO não ganha por isso. Aqui as duas
dizem `body:has(...)`: quem decide é a ordem, e a ordem tem de seguir o
degrau, não a arrumação temática. É a sexta vez hoje que a ordem decide
sobre a intenção. */
/* ⛔⛔ E O ALCANCE DA REGRA ESTAVA ERRADO, medido a 05/09/2026 na
`/support/close//`. A razão escrita acima é universal —
«nenhuma ação primária fica atrás de um aviso»
— e o seletor não era: pedia `.jn-pe-fixa`, que é a família do fluxo. A
tela de fechar o chamado não pertence a ela, levava `padding-bottom: 0`, e
a faixa cobria o «Fechar o chamado» inteiro.
⚠️⚠️ E É A TELA QUE CHEGA PELO E-MAIL, a quem pode nem ter sessão — ou seja,
exatamente quem vê a faixa pela primeira vez. Medido anónimo, a 844×330: a
faixa corre de 206 a 330, o botão está em 213. Em pé escapava por sorte.
📌 A regra abaixo é a mesma, sem o prefixo da família. A do fluxo continua
a existir logo acima e continua a ganhar, porque `:has()` duplo é mais
específico — e ali o recuo tem outro efeito, que é encurtar a coluna de
`100dvh` em vez de acrescentar espaço de rolagem. */
body:has(.mk-consentimento) { padding-bottom: 138px }
/* ⛔⛔ O DEGRAU DO MEIO, QUE FALTAVA NA CASA INTEIRA — e não é só da minha
tela: a regra do fluxo tinha o mesmo vão. Medida a altura da faixa contra
a folga reservada:
largura faixa reservado
320 248 258 ok
390 227 258 ok
560 186 258 ok
⛔ 561 186 138 FALTA 48
⛔ 640 145 138 FALTA 7
⛔ 720 145 138 FALTA 7
740 124 138 ok
1079 124 138 ok
O degrau dos 560 foi escolhido quando ninguém tinha medido a banda de 561
a 739 — e nela a faixa mede até 186 contra 138 de folga. ⭐ 198 cobre o
pior caso com 12 de margem, que é a mesma margem que a casa já se deu no
degrau de baixo (244 contra 258, 14 de folga).
⚠️ E a ORDEM importa mais do que a arrumação: os três degraus vão do mais
largo para o mais estreito, porque têm todos a mesma especificidade e quem
decide é o último que casa. Pôr o de 560 antes do de 739 dava 198 onde
devia dar 258 — foi exatamente o engano que o comentário acima conta. */
@media (max-width: 739px) {
body:has(.mk-consentimento),
body:has(.jn-pe-fixa):has(.mk-consentimento) { padding-bottom: 198px }
}
@media (max-width: 560px) {
body:has(.mk-consentimento),
body:has(.jn-pe-fixa):has(.mk-consentimento) { padding-bottom: 258px }
}
}
/* ── A TELA «CONFIRMAR»: as larguras da prancha ──────────────────────────────
Item 5 do Alan: «a tabela não ocupa a largura integral em ecrã cheio, e o
Nome do pedido também não. Respeitar a proporção da prancha.»
Os números são os da ficha `TELA-4-CONFIRMAR.md`, medidos na prancha
publicada: bloco central 1150, campo do nome 520.
⚠️ 1150 e não 680 como a tela 2, e a ficha diz porquê: «a tela 2 estreita
porque tinha duas frases longas; aqui há uma TABELA, e uma tabela estreita
força quebras que a leitura não pede».
⭐ E o campo é o único elemento estreito da tela, de propósito — a ficha
outra vez: «um nome de pedido tem cinco palavras, e um campo de 1150px
convida a escrever um parágrafo. A largura é a promessa do tamanho da
resposta.» */
/* ⚠ O PREFIXO `body:has(.jn-trilha)` SAIU daqui, e não foi trocado por outro:
`.jn-confirmar` só existe no `confirmar.html`, que é uma tela do fluxo. O
prefixo era cinto e suspensórios sobre uma classe que já é única.
📌 E é por isso que ele NÃO virou `.jn-pe-fixa`: trocar um marcador
redundante por outro sugeriria que esta regra tem a ver com a barra pinada,
e ela não tem — é a largura do miolo da tela de confirmar. */
.jn-confirmar .jn-meio { max-width: 1150px }
/* ⚠ O par da regra de cima: as duas são de topo e as duas casam. Ver lá a
razão e as duas datas. */
.jn-confirmar .mk-rotulo-pedido { max-width: none }
/* O aviso do saldo insuficiente, DENTRO da barra de ações e não solto por baixo.
Fica entre o `Voltar` e o `Confirmar`, que é a ordem da prancha.
⚠️⚠️ E ele COLA-SE AO BOTÃO — pedido do Alan, 04/09/2026: «Falta 1 crédito
para enviar este pedido. Comprar créditos → alinhar à direita, junto do
botão». A razão lê-se sozinha: o aviso é sobre o botão, diz por que ele não
vai funcionar. Colados, os dois lêem-se juntos.
⛔ E o `margin: 0 auto 0 12px` de antes fazia o CONTRÁRIO do que o comentário
dizia. O `auto` estava à DIREITA, e empurrava o aviso para a ESQUERDA — o
`text-align: right` só alinha o texto DENTRO da caixa, e por isso a coisa
parecia certa. Medido a 1440, antes:
Voltar termina em 363 · aviso 387→745 · primario 1192→1408
ou seja: 447px de buraco entre o aviso e o botao que ele explica
Os dois `auto` — o do aviso à direita e o do primário à esquerda — repartiam
o vão ao meio, 217,6 para cada. **A emenda é inverter o do aviso e desligar
o do primário quando há aviso**, e não acrescentar nada.
⚠️ Só do degrau do celular para cima: abaixo de 700 o aviso vai para fila
própria, por cima dos botões, e essa regra é da frente do desenho. */
.jn-pe .jn-pe-aviso {
margin: 0 auto 0 12px;
font-size: .86rem;
line-height: 1.35;
text-align: right;
}
/* ⚠⚠ E a tinta NÃO é a do erro. A `Passo4Confirmar` desenha esta frase em
`--texto-fraco`, 13px, peso 400 — e não em vermelho. Faz sentido: não é um
erro, é uma nota ao lado de um botão apagado, a dizer porquê.
⛔ E o vermelho da `.mk-erro` é `#9a2b2b` à mão, sem par no escuro. Medido
sobre `--papel` escuro (`#05102C`): **2,47**. O piso da 1.4.3 é 4,5.
***A frase que diz «não tens saldo» era a menos legível da tela.***
Com `--texto-fraco`: **6,40 no claro e 12,47 no escuro** (no escuro ele
resolve-se a `rgb(213,210,205)`, que é o par que o vermelho nunca teve).
⚠ Só aqui, e não na `.mk-erro`: ela é a classe do erro de formulário e
noutros sítios o vermelho é a coisa certa. O que estava errado era esta
frase usar a classe do erro para dizer uma coisa que não é erro. */
.jn-pe .jn-pe-aviso.mk-erro { color: var(--texto-fraco) }
@media (min-width: 701px) {
.jn-pe .jn-pe-aviso { margin: 0 0 0 auto }
.jn-pe:has(.jn-pe-aviso) .primary { margin-left: 12px }
}
/* ── A BARRA DA `CONFIRMAR` NAS DUAS LARGURAS ────────────────────────────────
Medida e desenho da frente do desenho; decisão do Alan, 04/09/2026.
⚠️⚠️ O gabarito tem UMA ordem e as duas larguras querem duas. Quem as concilia
é o `order` — e para o `order` valer, os botões têm de ser filhos DIRETOS do
flex. No computador o invólucro sai do caminho com `display: contents`. */
@media (min-width: 701px) {
.jn-pe-botoes { display: contents }
.jn-pe-celular .jn-voltar { order: 1 }
.jn-pe-celular .jn-pe-aviso { order: 2 }
.jn-pe-celular .primary { order: 3 }
.jn-pe-curto { display: none }
}
/* ⚠️ 700 e não outro número: é o degrau único do produto — a coluna única, o
rodapé legal e o tamanho da foto mordem todos lá. Está na
`design/REGRA-DO-CELULAR.md`. */
@media (max-width: 700px) {
.jn-pe-celular { flex-direction: column; align-items: stretch; gap: 10px }
.jn-pe-celular .jn-pe-aviso { width: 100%; text-align: center; margin: 0 }
.jn-pe-botoes { display: flex; gap: 10px }
.jn-pe-botoes .button { flex: 1 1 0; margin-left: 0 }
/* ⚠️ 30% e não os 20% do computador, e a razão é medida: a 390 os 20% dão 73
e o «Voltar» com a seta não cabe. Com 30% são 110 contra 248 do primário. */
.jn-pe-botoes .jn-voltar { flex: 0 0 30% }
.jn-pe-longo { display: none }
}
/* ⚠⚠ `.table-link` NÃO TINHA COR NENHUMA fora de uma tabela, e por isso saía com
o azul PREDEFINIDO DO NAVEGADOR. A única regra que lhe dava tinta era
`.compact-datatable td .table-link`, em `styles.css` — e nenhum dos seis
sítios que usam a classe hoje está dentro de uma `compact-datatable`:
acompanhar · base · confirmar · resultado · tipo_detalhe · tipo_novo
Medido: `rgb(0, 0, 238)` no claro e `rgb(158, 158, 255)` no escuro — as duas
são do navegador e nenhuma é token nosso. A `Passo4Confirmar` desenha o
«Comprar créditos» em `--acento-escuro`, peso 500, sem sublinhado.
📌 É uma classe batizada com o nome de um aspecto que ela só tinha num sítio.
O aspecto ficou preso ao sítio; o nome viajou. */
/* ⚠ O PESO NÃO ENTRA AQUI, e a razão é uma medida que me apanhou:
eu tinha posto `font-weight: 500` a partir do «Comprar créditos» da
`Passo4Confirmar` — e a `Passo5Acompanhar` desenha o «← Meus pedidos», que é
a MESMA classe, com 400. Um peso só não serve os dois, e o que eu fiz foi
generalizar a partir de um exemplo. Sem declaração, cada sítio herda o seu. */
.table-link { color: var(--acento-escuro); text-decoration: none }
/* O «Comprar créditos» da barra, esse é 500 na prancha. */
.jn-pe .jn-pe-aviso .table-link {
margin-left: 6px;
white-space: nowrap;
font-weight: 500;
}
.table-link:hover { color: var(--marinho); text-decoration: underline;
text-underline-offset: 2px }
/* ===== os alvos de toque do celular (prancha «Alvos de Toque no Celular»,
03/09/2026) =====
⭐ O que esta prancha corrige NÃO é conformidade com norma nenhuma. O piso de
44px que aparece por aqui não é decisão da casa sobre toque: o
SISTEMA-DE-DESIGN §4 tem «altura de controle (botão): 44px» como medida de
DESENHO copiada da prancha, e na mesma tabela o item de menu é 40 de
propósito. Coincide com o piso da Apple. O que a prancha argumenta é outra
coisa, e é verdade sem norma: o botão que APAGA a foto está a 16px do que se
quer carregar, e é o MENOR dos dois. Segurança, não conformidade.
⚠ E os «39 elementos abaixo de 44» eram uns dez. Cinco eram o `skip-link`,
que vive fora da tela; dezasseis falhavam por um pixel de arredondamento; e
um era o `` de 308×42 — o alvo é o
rótulo inteiro, e a primeira medida tinha lido o ELEMENTO em vez do ALVO.
Só sobrou o que está aqui embaixo. */
@media (max-width: 700px) {
/* 1 · MEUS DADOS, a foto — proposta B da prancha, escolhida pelo Alan.
O ✕ sai de junto do «Trocar a foto» e vira um selo no canto da PRÓPRIA
foto: fica ligado ao objeto que apaga, e sai da linha do botão comum.
⚠ A prancha desenhou a foto quadrada e o selo encostado no canto da caixa.
A foto é REDONDA, e um selo encostado no canto da caixa de um círculo fica
quase todo fora dele — que é o contrário de «sobre a foto». Com `right: 0;
bottom: 0` o centro do selo cai a 38px do centro de uma foto de 84 (raio
42): dentro do círculo, atravessando a borda. É a leitura da prancha para
um alvo que ela não desenhou redondo.
⚠ E o selo continua SEM RÓTULO — reconhece-se pelo sítio, não pela
palavra. É por isso que ele passa pelo modal, e o Alan confirmou-o em
03/09 às 20:00: «para pedir confirmação sim». O pedido já existia
(`data-confirmar`, D-257) e continua a ser o mesmo. */
.md-foto .mk-avatar-g { width: 84px; height: 84px; font-size: 1.7rem }
.md-tirar {
top: auto; bottom: 0; right: 0; width: 30px; height: 30px;
}
.md-tirar svg { width: 15px; height: 15px }
/* 130×44, e a 16px da foto — os dois discos de 44 deixam de se sobrepor,
que é a conta inteira desta correção. */
.md-foto { gap: 0 16px }
.md-foto > .button { width: 130px; min-height: 44px }
/* 2 · MEUS PEDIDOS, os filtros — quatro controles empilhados, e crescer um
empurrava três. Os dois seletores passam a ficar LADO A LADO, e a pilha
encurta ao mesmo tempo que todos os alvos sobem para 44:
hoje .... 41+12+34+10+34+10+37 = 178px
agora ... 44+12+44+12+44 = 156px ⭐ 22px mais curta
⭐ «Um alvo maior empurra o vizinho» era verdade na vertical. Na
horizontal havia espaço parado. */
.mk-busca input { min-height: 44px }
.mk-filtros { gap: 12px }
/* `calc(50% - 6px)` é metade da linha menos metade da folga: a 390 dá
exatamente os 173 da prancha, e continua certo em qualquer largura. */
.mk-filtros select { flex: 1 1 calc(50% - 6px); min-height: 44px }
/* ⚠ O `space-between` é meu, e não da prancha: ela desenhou os três da
mesma largura e não disse onde fica a seta. Ao alargar o botão para 173
eu criei o desalinhe — os dois seletores em cima levam a seta à borda
direita, e este ficava com ela colada ao texto, no meio de uma caixa
igual às outras. É consequência da medida que me mandaram fazer, não
desenho novo. */
.mk-ord-bt { flex: 0 0 calc(50% - 6px); min-height: 44px;
justify-content: space-between }
/* 3 · CRÉDITOS, o extrato — em largura não cabe, em altura cabe com folga.
Os dois seletores somam 308 numa tela de 390: crescer em largura está
fora de questão. Então a folga sai da LARGURA deles e a altura sobe.
hoje .... 150 + 8 + 150 = 308, altura 40
agora ... 148 + 12 + 148 = 308, altura 44 ⭐ mesma soma
⚠ Os 148 não vão escritos: `flex: 1` com folga de 12 dá 148 numa tela de
390 e continua a dar a metade certa nas outras. Uma largura fixa aqui
seria a medida de UMA tela transcrita para todas. */
.cr-filtros {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
flex: 1 1 100%;
gap: 12px;
}
.cr-filtros select {
flex: 1;
min-height: 44px;
}
}