` isso não vale nada: aqui ela é bloco e leva
largura mínima própria, senão a tabela volta a espremê-la. */
.td-dash-barra{ width:34%; min-width:80px; padding-left:12px !important; }
.td-dash-barra .barra-fundo{ display:block; width:100%; min-width:70px; }
/* 🚨 E o PREENCHIMENTO também: `.barra-fill` é um ``, e `width` não se
aplica a caixa em linha. Na origem ele era item de um flex (o pai
blockificava-o) e ninguém reparou. Fora do flex, o `width:24%` do style era
ignorado em silêncio e a barra ficava sempre vazia.
⭐ É a mesma família do card largo em coluna estreita: peça nascida num
contexto, reutilizada noutro. Ao reusar um componente, provar no lugar novo. */
.td-dash-barra .barra-fill{ display:block; }
.td-dash-val{ text-align:right; white-space:nowrap; padding-left:12px !important; }
.td-dash-val .lanc-sub{ display:block; }
/* 🚨 O gráfico é SVG feito em PHP, sem biblioteca: o app funciona offline e uma
biblioteca vinda de um CDN seria a primeira coisa a falhar no celular da
equipa no meio do turno. `preserveAspectRatio:none` deixa as barras esticarem
com a caixa — é um gráfico de proporção, não um desenho técnico. */
.dash-graf{ display:block; width:100%; height:120px; margin-top:6px; overflow:visible; }
/* ⚠️ O ENDEREÇO LONGO É UMA PALAVRA SÓ. Sem isto, o endereço do agendador saía
do cartão e **empurrava a página inteira para fora do tela** — visto no
celular dele a 20/08. `anywhere` porque um token não tem lugar bonito para
partir: partir feio é melhor do que não caber. */
.link-publico{ overflow-wrap:anywhere; word-break:break-word; min-width:0; }
/* Quando é o próprio `code` que leva a classe, não há nada para alinhar ao lado
— e `flex` num texto só complica a quebra. */
code.link-publico{ display:block; }
/* ⭐ A JANELA DO PAINEL TROCA SEM RECARREGAR: enquanto o pedaço novo não chega,
o que está no tela recua um pouco. É o sinal de que o toque foi ouvido — e
sem ele metade da lentidão que se sente é não haver resposta nenhuma. */
.dash-trocando{ opacity:.55; transition:opacity .12s; pointer-events:none; }
/* ⭐⭐ ESCOLHER UMA BARRA E VER O VALOR (ele, 20/08/2026). O alvo é a COLUNA
inteira — um dia fraco tem 2px de barra, e acertar-lhe com o dedo é sorte. */
.dash-graf .graf-alvo{ fill:transparent; }
.dash-graf .graf-barra{ fill:color-mix(in srgb, var(--destaque) 55%, transparent); transition:fill .12s; }
.dash-graf .graf-col-max .graf-barra{ fill:var(--destaque); }
.dash-graf .graf-col:hover .graf-barra,
.dash-graf .graf-col.graf-sel .graf-barra{ fill:var(--destaque); }
/* O valor só do melhor dia, e do escolhido: escrever os trinta é uma parede.
🚨 E com AURÉOLA branca à volta das letras (`paint-order`): num mês de 31 dias
o rótulo "€1.310" é mais largo do que a coluna dele e passa por cima das
barras vizinhas. Visto na tela a 20/08 — o "€0" de um dia parado saía cortado
ao meio por uma barra alta ao lado, e sem isto o número mais importante do
gráfico é o que se lê pior. */
.dash-graf .graf-valor{
opacity:0; transition:opacity .12s;
paint-order:stroke fill; stroke:var(--branco); stroke-width:1.1px; stroke-linejoin:round;
}
.dash-graf .graf-col-max .graf-valor,
.dash-graf .graf-col:hover .graf-valor,
.dash-graf .graf-col.graf-sel .graf-valor{ opacity:1; }
/* O dia da barra escolhida aparece mesmo quando não é um dos rótulos fixos —
é o que responde a "que dia é esta barra?". */
.dash-graf .graf-dia-so-sel{ opacity:0; transition:opacity .12s; }
.dash-graf .graf-col:hover .graf-dia-so-sel,
.dash-graf .graf-col.graf-sel .graf-dia-so-sel{ opacity:1; }
.dash-graf .graf-col.graf-sel .graf-dia{ fill:var(--texto); font-weight:700; }
/* ⚠️ O dedo não tem `:hover`. A classe `.graf-sel` é posta por um toque, e é
por isso que isto funciona no celular — onde ele olha para o painel. */
.dash-graf .graf-col{ cursor:pointer; }
/* ⚠️ O texto dentro do SVG não escala com o viewBox se levar `font-size` em px:
estas medidas são unidades do desenho, e é por isso que são tão pequenas. */
.dash-graf .graf-valor{ font-size:3.4px; font-weight:700; fill:var(--texto); }
.dash-graf .graf-dia{ font-size:3px; fill:var(--cinza-medio); }
.dash-graf-total{ margin:0; font-size:15px; }
.dash-graf-total .lanc-sub{ font-weight:400; }
.dash-graf-eixo{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--cinza-medio); margin-top:2px; }
.dash-marca{ color:var(--vermelho); font-weight:700; }
/* ═══ ⭐⭐ A EQUIPA: DUAS PERCENTAGENS LADO A LADO (ele, 19/08/2026) ═══
*"A informação que mais faz sentido pra mim aí é pontualidade e coerência com
a escala, em porcentagem."*
⚠️ Esta tabela é a ÚNICA do painel com cabeçalho, e de propósito: com duas
percentagens na mesma linha, "26%" e "51%" sem título são dois números sem
pergunta. As outras têm uma coluna só e o rótulo do bloco já a nomeia.
⚠️ A largura das duas colunas é IGUAL e fixa: se cada uma se ajustasse ao seu
conteúdo, a barra da esquerda ficava maior do que a da direita e o olho lia
diferença onde só há tipografia. */
.dash-equipa thead th{ font-size:11px; text-transform:uppercase; letter-spacing:.04em;
color:var(--cinza-medio); font-weight:700; padding:0 0 6px; border:none; }
.dash-equipa thead th + th{ padding-left:12px; }
.td-dash-pct{ width:20%; min-width:92px; padding-left:12px !important; }
.td-dash-pct .barra-fundo{ display:block; width:100%; margin-top:3px; height:6px; }
.td-dash-pct .barra-fill{ display:block; }
.td-dash-pct .lanc-sub{ display:block; margin-top:3px; }
.dash-pct{ font-size:15px; line-height:1.1; }
/* ⭐ A TAXA DE APROVEITAMENTO é o número que ele lê primeiro: o maior da linha e
o único com cor própria. Faixas iguais às das parcelas (90/70), para o painel
não ter duas ideias de "bom".
🚨 E desde que passou de nota 0–10 para PERCENTAGEM, o tamanho é a única
coisa que a distingue das parcelas — ela é o TODO, elas são as PARTES. Se
algum dia encolher para o tamanho delas, a linha passa a ler-se como quatro
percentagens soltas. Há teste a exigir que seja maior. */
.td-dash-nota{ width:92px; padding-left:12px !important; }
.dash-nota{ font-size:24px; line-height:1; font-family:var(--fonte-titulo); }
.dash-nota.nota-ok{ color:var(--verde); }
.dash-nota.nota-neutro{ color:var(--texto); }
.dash-nota.nota-ruim{ color:var(--vermelho); }
.th-nota{ cursor:help; }
/* ⚠️ Os ajustes são CONTAGEM e não proporção: sem barra, de propósito — uma
barra pede um todo, e "3 ajustes" não é 3 de coisa nenhuma. */
.td-dash-aj{ width:96px; padding-left:12px !important; }
.td-dash-aj strong{ font-size:15px; }
.dash-aj-tem{ color:var(--vermelho); }
/* ⚠️ `em 5 dia(s)` quebrava em duas linhas numa coluna estreita e empurrava a
linha inteira para baixo. Medido no navegador. */
.td-dash-aj .lanc-sub{ display:block; margin-top:2px; white-space:nowrap; }
/* ⚠️ A diferença de horas é o número que ele lê primeiro, e continua a ser o
maior da linha: as percentagens explicam, ela é o resultado. */
.dash-equipa .td-dash-val strong{ font-size:15.5px; }
@media (max-width:820px){
/* Em cartão, o cabeçalho não tem onde viver: cada célula leva o seu rótulo
no `data-label`, como no resto da casa. */
.dash-equipa thead{ display:none; }
}
/* ⭐ A NOTA na lista das tarefas: etiqueta discreta, tom neutro. Não é um aviso
nem um alerta — é só a espécie da linha, e uma cor forte fá-la-ia competir com
o que de fato precisa de ação. */
.tar-e-nota{ background:var(--cinza-fundo); color:var(--cinza-medio); font-weight:700; }
/* ═══ ⭐⭐⭐ O MEU APROVEITAMENTO — a caixa que a equipa vê (19/08/2026) ═══
⚠️ O número é grande e sozinho de propósito: é a única coisa que a pessoa tem
de levar do bloco. A posição e a média ficam ao lado, mais pequenas, porque
são contexto — e as três parcelas por baixo, porque são a explicação. */
.meu-aprov{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:8px; }
.meu-aprov-num{ font-size:44px; }
.meu-aprov-lado{ display:flex; flex-direction:column; gap:2px; }
.meu-aprov-pos{ font-size:15px; font-weight:700; }
/* ⚠️ As parcelas empurram-se para a direita no tela largo e passam para baixo no
celular: `margin-left:auto` com `flex-wrap` faz as duas coisas sozinho. */
.meu-aprov-mods{ display:flex; gap:16px; margin-left:auto; flex-wrap:wrap;
font-size:12.5px; color:var(--cinza-medio); }
.meu-aprov-mods strong{ display:block; font-size:15px; color:var(--texto); }
/* ═══ AS SECÇÕES (ele, 19/08/2026: *"separar por sessões, mas de forma muito
sutil, pra não misturar o que é financeiro do que é reservas, pessoas"*).
⚠️ Subtil quer dizer: um rótulo pequeno e um fio. Nada de caixas dentro de
caixas — os cartões já têm moldura, e moldura sobre moldura vira parede. */
.dash-sec{ margin-bottom:8px; }
.dash-sec-cab{ display:flex; align-items:center; gap:12px; margin:26px 0 12px; }
.dash-sec-cab:first-of-type{ margin-top:0; }
.dash-sec-rot{ font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
color:var(--cinza-medio); white-space:nowrap; }
.dash-sec-fio{ flex:1; height:1px; background:var(--cinza-borda); }
/* ═══ o seletor de janela (ele, 19/08/2026) ═══
Três janelas e mais nada. É um LINK, não JavaScript: o painel tem de servir
com a rede a cair, como o resto da casa. */
.dash-periodo{ display:inline-flex; gap:2px; margin:0 0 14px; padding:3px;
background:var(--cinza-fundo); border-radius:999px; }
.dash-per{ padding:6px 14px; border-radius:999px; font-size:var(--cap-controle-fonte); font-weight:var(--cap-controle-peso);
color:var(--cinza-medio); text-decoration:none; transition:background .15s, color .15s; }
.dash-per:hover{ color:var(--texto); }
.dash-per.ativo{ background:var(--branco); color:var(--texto); box-shadow:0 1px 3px rgba(0,0,0,.08); }
/* ⭐⭐ AS SETAS DA JANELA DO PAINEL (24/08/2026).
Ele: *"não mostra mais a semana na segunda-feira (…) e quando o dia acabou,
que é quando eu quero ver o que passou no dia, ele já não aparece nada"*.
⚠️ Ficam FORA da pílula das lentes, com fundo próprio: dentro dela, o `‹`
parecia uma quarta opção a par de Hoje/Semana/Mês. São duas coisas
diferentes — a régua, e onde se está com ela.
⚠️ O rótulo usa `tabular-nums` e uma largura mínima: sem isso, a barra dança
de largura a cada seta ("7–13 ago" é mais estreito que "24–30 ago"). */
.dash-nav{ display:inline-flex; align-items:center; gap:2px; margin:0 0 14px 8px;
padding:3px; background:var(--cinza-fundo); border-radius:999px; vertical-align:middle; }
.dash-nav-seta{ display:inline-flex; align-items:center; justify-content:center;
min-width:30px; height:30px; border-radius:999px; font-size:17px; line-height:1;
color:var(--cinza-medio); text-decoration:none; transition:background .15s, color .15s; }
.dash-nav-seta:hover{ background:var(--branco); color:var(--texto); }
.dash-nav-rot{ min-width:112px; padding:0 6px; text-align:center; font-size:13px;
font-weight:600; color:var(--texto); font-variant-numeric:tabular-nums; }
/* ⭐ O RÓTULO É O CALENDÁRIO (25/08/2026). O campo de data está POR CIMA do
texto, transparente e do tamanho todo: quem carrega onde lê a janela abre o
calendário do sistema. Um ícone ao lado era mais uma coisa na barra, e a
barra do celular já estava a rebentar em agosto.
⚠️ `opacity:0` e não `display:none`: escondido de verdade, o campo deixava de
receber o toque — e sem toque não há calendário nenhum. */
.dash-nav-rot{ position:relative; cursor:pointer; }
.dash-nav-rot:hover{ color:var(--vermelho); }
.dash-nav-cal{ position:absolute; inset:0; width:100%; height:100%;
margin:0; padding:0; border:0; background:none; opacity:0; cursor:pointer;
/* ⚠️ O iOS aumenta a letra de um campo com menos de 16px e, ao focar, dá zoom
na página inteira. Invisível ou não, o campo continua a ser um campo. */
font-size:16px; }
/* ⚠️ O anel do teclado tem de aparecer no que SE VÊ: o campo é transparente, e
sem isto quem navega por Tab não sabia onde estava. */
.dash-nav-rot:has(.dash-nav-cal:focus-visible){ outline:2px solid var(--vermelho);
outline-offset:2px; border-radius:999px; }
/* A volta ao presente vive DENTRO da navegação (é tempo, como as setas) e só
existe quando se saiu do presente — ver a nota na view. */
.dash-nav-agora{ padding:0 12px; height:30px; display:inline-flex; align-items:center;
border-radius:999px; font-size:var(--cap-controle-fonte); font-weight:var(--cap-controle-peso); color:var(--vermelho);
text-decoration:none; white-space:nowrap; transition:background .15s; }
.dash-nav-agora:hover{ background:var(--branco); }
/* ⭐ ARRUMAR O PAINEL NÃO É UMA LENTE (25/08/2026). Ao lado de Hoje · Semana ·
Mês é uma porta para outra tela, e por isso ocupa o que precisa em vez de
pedir a mesma fatia que as réguas. No largo diz-se por extenso. */
.arrumar-curto{ display:none; }
.dash-arrumar{ flex:0 0 auto; white-space:nowrap; }
/* 🚨 O ALVO DE TOQUE: 30px é o desenho, 44 é o dedo — a régua da auditoria de
23/08, a mesma dos `‹ ›` do Diário e do `?` das dicas. */
@media (pointer:coarse){
.dash-nav-seta{ min-width:44px; height:44px; }
/* ⭐ E as LENTES também (25/08/2026). Até aqui tinham 30px de altura e
escapavam à régua — só cumpriam por acidente, porque o "Arrumar o painel"
partido em duas linhas esticava a fila. Arrumado o rótulo, o alvo caía para
30px: a correção de uma coisa ia estragar a outra, calada. */
.dash-per{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
/* ⭐ E o "Tirar" de cada aparelho (25/08/2026): mede 31px por omissão, e é um
botão que APAGA — o pior lugar para um alvo pequeno é ao lado de um nome
que se parece com o do vizinho.
⚠️ 🔍 E fica um fato medido, que NÃO se arruma aqui: o `.btn-mini` da casa
tem 31px com o dedo em TODAS as telas. Mudá-lo em bloco mexe em dezenas de
telas de uma vez, e isso quer-se medido e visto, não enfiado ao lado de
outro trabalho. Está anotado no PENDENCIAS. */
.push-ap .btn-mini{ min-height:44px; display:inline-flex; align-items:center; }
/* ══════════════════════════════════════════════════════════════════════
⭐⭐ OS 255 ALVOS DE 31px — pagos em 28/08/2026, e sem mexer no desenho.
O `.btn-mini` media **31px** com o dedo, contra a régua de 44 da casa, em
**255 usos espalhados por 48 telas**. Ficou anotado como "medido e não
tocado" desde 25/08 por um motivo bom: crescer o botão de verdade empurra
a linha da tabela, e isso mexe em dezenas de telas de uma vez.
⭐ A saída é esticar a ÁREA DE TOQUE sem esticar o botão: um pseudo-
elemento invisível, centrado, com os 44px de altura. O dedo acerta em 44;
o olho continua a ver 31; e **nenhuma linha se move**.
🚨 MEDIDO ANTES, porque isto só é seguro se os botões não estiverem
empilhados: a área invisível cresce ~6,5px para cada lado, e dois botões
verticalmente próximos passariam a roubar o toque um do outro. Medido em
quatro telas com o dedo (375px):
Tarefas 30 botões · menor distância vertical **167px**
Produtos 3 botões · menor distância vertical **55px**
Estoque / Conta — sem pares
Zero pares abaixo de 44. Com folga.
⚠️ Se um dia aparecer uma tela com dois `.btn-mini` empilhados a menos de
44px, esta regra passa a roubar toques em silêncio — e o silêncio é o
problema. Por isso a medição está escrita aqui, e não só no commit.
⚠️ `pointer-events` fica como está: o pseudo-elemento é filho do botão, e
por isso o toque nele já é toque no botão.
══════════════════════════════════════════════════════════════════════ */
.btn-mini{ position:relative; }
.btn-mini::after{
content:''; position:absolute; left:0; right:0; top:50%;
transform:translateY(-50%); height:44px;
}
/* ══════════════════════════════════════════════════════════════════════
🚨🚨 O BOTÃO DO MENU MEDIA 38px — auditoria de 01/09/2026.
E não era uma peça qualquer: é a **porta da navegação em ~100 telas**, a
que mais se toca no telemóvel. `padding:6px` à volta de um ícone de 26px
dá 38, e faltavam 6.
🚨 **A cerca estava VERDE**, e a razão é a mesma que mordeu o `.voltar` a
30/08: o `test-alvo-do-dedo.php` procura classes que DECLAREM
`height:<44px`, e a altura destas três vem do `padding`. Duas vezes o mesmo
ponto cego. O que a cerca não vê só aparece varrendo o navegador — e é por
isso que a varredura ficou escrita na fila do PENDENCIAS.
🚨 MEDIDO ANTES, como manda a regra desta secção (375px):
vão entre a logo e o sanduíche **20px** → sobra 17 depois de crescer
`.voltar`, o clicável mais perto **17px** abaixo → sobra ~11 entre áreas
altura da barra **72px**
Zero pares a colidir.
🐞 E A PRIMEIRA TENTATIVA ESTAVA ERRADA, o que vale mais do que a correção:
pus `min-height:44px` nos dois e cresci a caixa de verdade. Funcionou — e
**empurrou a barra de 72 para 76px**. Medido no navegador logo a seguir.
⚠️ Os 72 estão escritos à mão em DOIS sítios do CSS (o recuo do `.conteudo`
e o do recado), e há cerca a exigir que sejam iguais — mas ela compara os
dois NÚMEROS ESCRITOS, não a barra desenhada: ficou verde com a barra já a
medir 76, e 4px de conteúdo por baixo dela.
⭐ Por isso a ALTURA vai por área invisível (a barra não sente) e só a
LARGURA cresce de verdade (não há nada a empurrar na horizontal). O olho vê
o mesmo cabeçalho de sempre; o dedo passa a acertar em 44×44.
══════════════════════════════════════════════════════════════════════ */
.sb-hamburguer{ min-width:44px; position:relative; }
.sb-hamburguer::after{
content:''; position:absolute; left:0; right:0; top:50%;
transform:translateY(-50%); height:44px;
}
/* A logo é também um LINK (leva ao Início) — 110px de largo, faltava-lhe só a
altura, e pela mesma razão ela vai por área invisível. */
.sb-dext{ position:relative; }
.sb-dext::after{
content:''; position:absolute; left:0; right:0; top:50%;
transform:translateY(-50%); height:44px;
}
/* ⚠️ O «Agora não» do convite a instalar: 36px, e é o botão que faz a faixa
desaparecer. Um dedo que falha nele deixa a faixa a tapar a tela.
⭐ Este cresce de verdade: vive numa faixa que se mede pelo conteúdo, e não
há barra nenhuma dependente da altura dele. */
.inst-nao{ min-height:44px; display:inline-flex; align-items:center; }
/* ⭐ O mesmo para o `+` da coluna: 24px no olho, 44 no dedo. As colunas são
vizinhas na HORIZONTAL, por isso aqui a área cresce nos dois eixos — e a
coluna tem 300px de largura, folga de sobra. */
.tar-coluna-mais::after{
content:''; position:absolute; left:50%; top:50%;
transform:translate(-50%, -50%); width:44px; height:44px;
}
/* ══════════════════════════════════════════════════════════════════════
⭐ MAIS QUATRO PEÇAS PEQUENAS (28/08/2026) — as que a medição libertou.
A cerca do `test-alvo-do-dedo.php` nomeou onze peças abaixo dos 44px.
Estas quatro foram MEDIDAS no navegador e não têm vizinho vertical perto:
`.dica-btn` 15px · vizinho V: nenhum
`.txt-btn` 26px · vizinho V: nenhum
`.ic-btn` 26px · vizinho V: 67px
`.ret-remover` 34px · vizinho V: nenhum
⚠️ **A área cresce só em ALTURA**, e é isso que as torna seguras: estas
peças vivem em FILA HORIZONTAL e os vizinhos de lado estão perto — o `?`
da ajuda tem outro a 21px, a barra do texto rico tem 31px entre botões,
o `.ic-btn` tem 38px. Crescer para os lados roubava-lhes o toque.
⭐ `left:0; right:0` = a largura é a do próprio elemento. Só a altura sobe.
🚨 E O `.cel-add` FICA DE FORA, medido: o `+` da grelha da escala tem
vizinho vertical a **39px** — abaixo dos 44. Ali a área invisível roubava
o toque da linha de baixo, e um `+` que acrescenta turno à pessoa errada é
pior do que um alvo pequeno. O mesmo vale para o `.chip-x` (30px).
⏭ E seis não consegui pôr à vista para medir (`.lanc-ico`,
`.lanc-conferir`, `.lanc-receber-btn`, `.flash-x`, `.tar-sub-tique`,
`.tar-dia span`). O que não se mede, não se toca.
══════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
🚨🚨 O «VOLTAR» — 36px em **86 TELAS**, e nenhuma cerca o via.
Achado na auditoria de 30/08/2026, e achado NO NAVEGADOR: o cronômetro do
`test-alvo-do-dedo.php` procura classes que DECLAREM `height:<44px`, e a
altura desta vem do `padding: 7px 14px`. Uma cerca que lê declarações não
vê o que é desenhado — e este é o alvo mais repetido da casa inteira, o
primeiro de quase todas as telas.
📏 MEDIDO a 375px com o dedo: **119×36px**, vão vertical até ao clicável
seguinte **173px**, vão horizontal **10px** (o irmão do `atalho-par`).
⭐ 4px para cada lado em ALTURA cabem com folga de sobra; para os lados
não havia 10px para dar — daí o `left:0; right:0`, que é a receita que já
serve o `.btn-mini` e as quatro peças de 28/08.
══════════════════════════════════════════════════════════════════════ */
.voltar{ position:relative; }
.voltar::after{
content:''; position:absolute; left:0; right:0; top:50%;
transform:translateY(-50%); height:44px;
}
.dica-btn, .txt-btn, .ic-btn, .ret-remover{ position:relative; }
.dica-btn::after, .txt-btn::after, .ic-btn::after, .ret-remover::after{
content:''; position:absolute; left:0; right:0; top:50%;
transform:translateY(-50%); height:44px;
}
/* ══════════════════════════════════════════════════════════════════════
⭐⭐ AS SEIS QUE FALTAVAM — POSTAS À VISTA E MEDIDAS (30/08/2026).
O bloco acima fechou com *"seis não consegui pôr à vista para medir"*, e
a casa tem regra para isso: **o que não se mede, não se toca**. Ficaram
seis meses de cerca amarela por falta de medição, não por falta de
decisão. Hoje mediram-se — e o difícil não era medir, era **fazê-las
nascer**:
`.lanc-ico` e irmãs o Diário abre no MÊS CORRENTE, e o mês corrente
estava vazio. A tela certa, sem uma linha dentro.
`.tar-dia` só nasce com a recorrência posta em *Semanal* —
está atrás de uma escolha num `select`.
`.tar-sub-tique` precisa de uma tarefa com FILHAS (`mae_id`), e não
havia nenhuma.
`.flash-x` o `x` é feito em JS, e só sobre um `.flash-erro`.
🚨🚨 E A MEDIÇÃO DEU UMA COISA QUE NINGUÉM TINHA PERCEBIDO: até aos 600px
o Diário **não mostra a coluna dos ícones** (`.lanc-tabela tbody tr >
td.td-acoes{display:none}`, mais acima) — a linha inteira é o alvo, e
toca-se para abrir a ficha. Ou seja, no telemóvel estas peças não existem
para o dedo. Existem **do iPad para cima**: `pointer:coarse` verdadeiro e
a coluna à vista. É exatamente onde ele trabalha, e é lá que estavam
1.332 botões de 26px — um deles o de APAGAR.
📏 MEDIDO NO NAVEGADOR, a 760px e com o dedo, sobre os 1.332 (não uma
amostra): altura **26px** em todos, vão vertical mínimo **39px**, vão
horizontal **4px** (a grelha é `repeat(6, 30px)` com `gap:2px`).
⭐ Por isso a área cresce **só em altura**: 9px para cada lado comem 18
dos 39, e sobram 21 livres. Para os lados não havia 4px para dar.
⭐ PROVADO NA PÁGINA, e não só na conta — `elementFromPoint` sobre um par
vizinho de verdade, depois de a regra entrar:
dentro do botão .......... acerta nele
5px abaixo dele .......... acerta nele ← a área nova a funcionar
8px abaixo dele .......... acerta nele ← a beira da área
19px (meio do vão) ....... acerta na CÉLULA, em ninguém
8px acima do de baixo .... acerta no de baixo
Nenhum dos dois rouba o toque do outro. E 0 de 1.332 mudaram de lugar.
⭐ O `.flash-x` cresce nos DOIS eixos, e é o único que pode: mede 38x38 e
o clicável mais perto está a **115px** por baixo e **501px** à esquerda.
Está sozinho no cimo da página — é um aviso, não uma fila de botões.
🚨 E DUAS FICAM DE FORA, medidas e escritas, para ninguém as "arrumar"
por engano mais tarde:
`.tar-sub-tique` 22x22 · vizinho vertical a **18px** (um campo de
texto). Crescer 11px para cada lado punha a área a
7px de um campo — e o engano aqui DÁ A SUBTAREFA POR
FEITA. Alvo pequeno é pior do que nada; alvo que
mente é pior do que alvo pequeno.
`.tar-dia` 34px de alto, mas com **7px** por cima e **11px** por
baixo (as sete pílulas dobram para duas linhas). Não
há folga nenhuma para dar.
⏭ Estas duas só se arranjam mudando o DESENHO — dando-lhes altura a
sério, com a fila a crescer — e isso vê-se, por isso pede-se antes.
══════════════════════════════════════════════════════════════════════ */
.td-acoes-icones .lanc-ico{ position:relative; }
.td-acoes-icones .lanc-ico::after{
content:''; position:absolute; left:0; right:0; top:50%;
transform:translateY(-50%); height:44px;
}
.flash-x{ position:relative; }
.flash-x::after{
content:''; position:absolute; left:50%; top:50%;
transform:translate(-50%, -50%); width:44px; height:44px;
}
/* ⭐ Os ícones da LINHA QUE ENTENDE (23/09/2026): 28px com o rato, 44 com o
dedo — é no telemóvel que se escolhe a data com o polegar. E o × de cada
etiqueta estica a área sem crescer o desenho, como o `.btn-mini`. */
.tlin-ic{ width:44px; height:44px; }
.tlin-x{ position:relative; }
.tlin-x::after{ content:''; position:absolute; inset:-14px -10px; }
}
/* ⚠️ O dinheiro é MAIS COMPRIDO do que uma contagem: "€12.480,20" não cabe no
corpo de 34px que servia para "3". Encolhe-se o número, não o cartão — a
fila tem de continuar alinhada. */
/* 🚨 `overflow-wrap:anywhere` partia "€-2.525,54" ao meio ("€-2.525,5" / "4"),
que é a pior coisa que se pode fazer a um número. Dinheiro não se quebra:
encolhe-se a letra até caber. */
.dash-num{ white-space:nowrap; }
/* 🚨🚨 O NÚMERO CRESCIA COM A JANELA E A CAIXA ENCOLHIA COM A FILA (25/08/2026).
Ele: *"Arruma o Dashboard, tem valores pra fora."*
O tamanho vinha de `2vw` — uma percentagem do ECRÃ — e a largura do cartão
vem da FILA: `flex:1 1 158px` reparte o que sobra entre os cartões que lá
estão. São duas medidas diferentes, e por isso um painel com sete cartões
dava letra de 34px dentro de uma caixa de 210px: **€-3.078,30 saía por fora
sem o tela ter mudado de tamanho.** Acrescentar um cartão piorava tudo o que
já lá estava — que é o pior tipo de acoplamento que uma tela pode ter.
⭐ `cqi` é a mesma percentagem, medida no CARTÃO — e `1cqi` é 1% do MIOLO,
já sem os 36px de respiro. O número volta a ser grande porque o cartão é
grande, e não porque o monitor é.
📏 **16% é medido, não escolhido a olho.** É o maior valor que ainda deixa
caber o pior número plausível — `€-123.480,20`, doze caracteres — no cartão
mais apertado que a fila produz (8 cartões num tela de 1980). A 16,8% cabia
tudo o que ele tem hoje e rebentava com seis dígitos; a 16% sobram 5px, e um
cartão cheio fica com 32px em vez dos 34 de antes — dois pixels que ninguém
vê, em troca de um número que nunca mais sai da caixa.
⚠️ `container-type:inline-size` só contém o eixo HORIZONTAL. A altura
continua a vir do conteúdo, que é o que mantém a fila alinhada. */
.dash-tile{ container-type:inline-size; }
.dash-tile:has(.dash-num) .dash-num{ font-size:clamp(17px, 16cqi, 34px); }
/* ⚠️ E o aperto da letra passa a ser relativo: `-1px` num número de 34px é
ajuste; no mesmo número a 18px é o que faz os dígitos tocarem-se. */
.dash-num{ letter-spacing:-.03em; }
/* A variação face ao período anterior, discreta ao lado do rótulo. */
.dash-var{ font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
/* ⚠️ O SEMÁFORO não é a cor do dinheiro: marca a MEDIDA (prime cost acima do
alvo). Por isso pinta a borda e não o número — o número já tem dono. */
.dash-tom-atencao{ border-color:color-mix(in srgb, #d97706 45%, transparent); }
.dash-tom-perigo{ border-color:color-mix(in srgb, var(--vermelho-sinal) 45%, transparent); }
.dash-tom-ok{ border-color:color-mix(in srgb, var(--verde) 35%, transparent); }
@media (max-width:600px){
.dash-tile{ max-width:none; flex:1 1 44%; }
.dash-num{ font-size:28px; }
/* ⚠️ No celular os cartões são dois por linha e já não têm `max-width`, por
isso a percentagem do cartão continua a servir — só o teto baixa, que é o
que impede um número de 34px num tela de 375. */
.dash-tile:has(.dash-num) .dash-num{ font-size:clamp(16px, 16cqi, 28px); }
/* 🐞 A BARRA TRANSBORDAVA NO TELEMÓVEL (pego na prova de tela, 24/08).
O `.dash-periodo` é uma linha flex SEM quebra, e a navegação nasceu lá
dentro: a 375px o rótulo saía cortado — "Julho 202" — e a seta `›` e o
"Agora" ficavam fora do tela, sem nada a dizer que existiam.
⭐ `flex-wrap` na barra e linha inteira para a navegação: as lentes em cima,
o tempo em baixo. */
.dash-periodo{ display:flex; width:100%; flex-wrap:wrap; }
/* ⚠️ 10px de respiro e não 14: medido a 375px, os quatro pedaços pediam 330
numa barra de 319 — e o que sobrava dos 11px em falta era a segunda linha
do "Arrumar o painel", que esticava a fila toda para 51px de altura.
⭐ A altura do alvo não vem daqui: vem do `pointer:coarse` mais abaixo. */
.dash-per{ flex:1; text-align:center; padding:6px 10px; }
/* 🐞 A CULPADA DAS DUAS LINHAS. Ver a nota na view: aqui troca-se o rótulo
longo pelo verbo, e a porta deixa de pedir a fatia de uma lente.
⚠️ O `flex:0 0 auto` tem de estar AQUI dentro: a regra de cima vive antes
da média no arquivo e tem o mesmo peso, portanto o `flex:1` das lentes
ganhava-lhe por ordem — e os quatro pedaços voltavam a ser iguais, com o
link a parecer a quarta régua. */
.dash-arrumar{ flex:0 0 auto; }
.arrumar-longo{ display:none; }
.arrumar-curto{ display:inline; }
/* ⚠️ As setas vão para as PONTAS e o rótulo fica no meio, que é onde o polegar
alcança as duas sem esticar — e é a mesma forma do `.mes-nav` do Diário no
celular, que ele já usa todos os dias. */
.dash-nav{ display:flex; flex:1 0 100%; margin:8px 0 0; justify-content:space-between; }
.dash-nav-rot{ flex:1; }
/* ⚠️ A navegação ocupa a linha inteira e por isso EMPURRA quem vem depois
dela no HTML — o "Arrumar o painel" caía sozinho numa terceira linha. A
ordem visual arruma isso sem mexer no HTML: lentes e "arrumar" em cima, o
tempo em baixo. Duas linhas, e não três, antes de o painel começar. */
.dash-nav{ order:3; }
.dash-arrumar{ order:2; }
/* ⚠️ Já está dentro da navegação: aqui só se garante que não encolhe. */
.dash-nav-agora{ flex:0 0 auto; }
}
/* Relógio de ganhos (funcionário) + tela de Salários */
.relogio{ background:var(--branco); border:1px solid var(--cinza-borda); border-radius:var(--raio);
padding:20px 22px; margin:0 auto 22px; max-width:420px; text-align:center; }
.relogio-topo{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:6px; }
.relogio-rot{ font-size:13px; font-weight:600; color:var(--cinza-medio); text-transform:uppercase; letter-spacing:1px; }
.relogio-pulso{ font-size:11.5px; font-weight:700; color:var(--vermelho);
background:color-mix(in srgb, var(--vermelho) 12%, transparent); padding:2px 9px; border-radius:999px; }
.relogio-ativo .relogio-pulso{ animation:pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
.relogio-valor{ font-family:var(--fonte-titulo); font-size:40px; font-weight:700; letter-spacing:-1px; line-height:1.1; }
.relogio-tempo{ color:var(--cinza-medio); font-size:14px; margin-top:2px; }
.relogio-mes{ display:flex; align-items:baseline; justify-content:center; gap:8px;
margin-top:14px; padding-top:12px; border-top:1px solid var(--cinza-borda); font-size:14px; }
.relogio-mes span{ color:var(--cinza-medio); }
.relogio-nota{ margin-top:12px; font-size:11.5px; line-height:1.5; color:var(--cinza-medio); text-align:left; }
.aviso-sensivel{ background:color-mix(in srgb, var(--vermelho) 7%, transparent);
border:1px solid color-mix(in srgb, var(--vermelho) 25%, transparent);
color:var(--preto); padding:11px 14px; border-radius:var(--raio-sm); font-size:13.5px; margin-bottom:18px; }
.inp-sal{ width:110px; padding:6px 9px; text-align:right; font:inherit; font-size:14px;
border:1.5px solid var(--cinza-borda); border-radius:var(--raio-sm); background:var(--branco); color:var(--preto); }
.inp-sal:focus:not(:focus-visible){ outline:none; border-color:var(--preto); }
.sel-sal{ padding:6px 9px; font:inherit; font-size:14px; border:1.5px solid var(--cinza-borda);
border-radius:var(--raio-sm); background:var(--branco); color:var(--preto); }
/* Análises de reservas: barras em CSS puro (sem biblioteca) */
.cartoes-taxa{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:26px; }
.cartao-taxa{ flex:1 1 220px; background:var(--branco); border:1px solid var(--cinza-borda);
border-radius:var(--raio-sm); padding:16px 18px; }
.taxa-topo{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.taxa-rot{ font-size:13.5px; color:var(--cinza-medio); font-weight:600; }
.taxa-val{ font-family:var(--fonte-titulo); font-size:24px; }
.barra-fundo{ background:var(--cinza-fundo); border-radius:999px; height:9px; overflow:hidden; flex:1; }
.barra-fill{ height:100%; border-radius:999px; background:var(--vermelho); transition:width .3s; }
.barra-fill.tom-ok{ background:var(--verde); }
.barra-fill.tom-ruim{ background:var(--vermelho); }
.barra-fill.tom-neutro{ background:var(--cinza-medio); }
.grade-analises{ display:flex; flex-wrap:wrap; gap:28px; margin-bottom:8px; }
.bloco-analise{ flex:1 1 320px; min-width:280px; }
.linha-barra{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.barra-rot{ width:44px; flex:none; font-size:13px; color:var(--cinza-medio); font-weight:600; }
.barra-rot-larga{ width:110px; }
.barra-num{ width:44px; flex:none; text-align:right; font-size:13.5px; font-weight:700; }
.grade-origem{ max-width:520px; }
@media (max-width:600px){ .barra-rot-larga{ width:80px; } }
/* Trilha de auditoria */
.form-filtros{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-bottom:18px; }
.form-filtros .campo{ margin-bottom:0; display:flex; flex-direction:column; }
.form-filtros .campo > label{ display:block; font-size:13px; font-weight:600; color:var(--cinza-medio); margin-bottom:6px; }
/* o form de filtros não fica dentro de .form, então os campos não herdavam o
estilo do sistema: select e input[type=date] vinham com a altura padrão do
navegador (diferentes entre si) e os rótulos desalinhavam. Iguala tudo. */
.form-filtros .campo select,
.form-filtros .campo input{
height:44px; padding:0 14px; font-family:var(--fonte-texto); font-size:15px;
border:1.5px solid var(--cinza-borda); border-radius:var(--raio-sm);
background:var(--branco); color:var(--preto);
}
.form-filtros .campo select:focus,
.form-filtros .campo input:focus:not(:focus-visible){ outline:none; border-color:var(--preto); }
.form-filtros .campo-acao{ display:flex; flex-direction:row; gap:10px; align-items:center; height:44px; }
.selo-aud{ background:var(--cinza-fundo); color:var(--cinza-medio); } /* forma: ver .selo */
.selo-aud.aud-excluir{ background:color-mix(in srgb, var(--vermelho) 14%, transparent); color:var(--vermelho); }
.selo-aud.aud-criar{ background:color-mix(in srgb, var(--verde) 14%, transparent); color:var(--verde); }
.selo-aud.aud-editar, .selo-aud.aud-status{ background:color-mix(in srgb, var(--azul) 12%, transparent); color:var(--azul); }
.selo-aud.aud-aprovar{ background:color-mix(in srgb, var(--verde) 14%, transparent); color:var(--verde); }
.selo-aud.aud-recusar{ background:color-mix(in srgb, var(--vermelho) 12%, transparent); color:var(--vermelho); }
.td-quando{ white-space:nowrap; }
.td-detalhe{ color:var(--cinza-medio); font-size:13.5px; }
.paginacao{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px; }
/* Fluxo de atendimento: grade do mês com lançamento dos avulsos */
.tabela-fluxo th{ text-align:center; }
.tabela-fluxo td{ text-align:center; }
.tabela-fluxo .td-nome{ text-align:left; white-space:nowrap; }
.tabela-fluxo .grupo-almoco, .tabela-fluxo .grupo-jantar{
border-bottom:2px solid color-mix(in srgb, var(--vermelho) 35%, transparent);
}
.tabela-fluxo tfoot th{ background:color-mix(in srgb, var(--vermelho) 7%, transparent); font-weight:700; }
.tabela-fluxo .linha-hoje{ background:color-mix(in srgb, var(--vermelho) 5%, transparent); }
.inp-fluxo{
width:64px; padding:5px 7px; text-align:center; font:inherit; font-size:13.5px;
border:1.5px solid var(--cinza-borda); border-radius:var(--raio-sm); background:var(--branco); color:var(--preto);
}
.inp-fluxo:focus:not(:focus-visible){ outline:none; border-color:var(--preto); }
.fluxo-salvar{ position:sticky; bottom:14px; margin-top:16px; z-index:5; }
.fluxo-salvar .btn{ box-shadow:var(--sombra); }
/* dias fechados (exceções) na Disponibilidade */
.fech-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:12px 0 16px; }
.fech-form input[type="date"]{ padding:9px 10px; border:1.5px solid var(--cinza-borda); border-radius:var(--raio-sm); font:inherit; background:var(--branco); }
.fech-form input[type="text"]{ flex:1; min-width:200px; padding:9px 12px; border:1.5px solid var(--cinza-borda); border-radius:var(--raio-sm); font:inherit; }
.fech-lista{ display:flex; flex-direction:column; gap:8px; }
.fech-item{ display:flex; align-items:center; gap:14px; background:var(--branco); border:1px solid var(--cinza-borda);
border-left:3px solid var(--vermelho-sinal); border-radius:var(--raio-sm); padding:10px 14px; }
.fech-item .fech-motivo{ color:var(--cinza-medio); flex:1; }
/* faixa "fechado" na agenda */
.agenda-fechado{ background:var(--vermelho-sinal-fundo); border:1px solid #f6c9d3; color:var(--vermelho-sinal); padding:12px 16px;
border-radius:var(--raio-sm); margin-bottom:18px; font-size:14px; font-weight:600; }
/* ═══ modo operação: a tela do turno ═══
🐞 08/08/2026 (ele, com o tela do portátil à frente): *"as reservas estão
todas umas embaixo das outras formando uma coluna, quando poderiam estar em
3 colunas... reorganiza essa regra da página pra sempre aproveitar o espaço"*.
⚠️ A CAUSA não era a lista: era a grade. Era `340px 1fr`, com o ponto a
ocupar a coluna fixa. Só que o bloco do ponto é CONDICIONAL — quem não tem
registo de colaborador (a administração, por exemplo) não o vê —, e aí as
reservas caíam na coluna de 340px e o `1fr` ficava vazio o tela todo. Um
layout que só funciona quando um bloco opcional existe não é um layout.
Agora as colunas nascem do espaço que há (`auto-fill`), e não de um número
escrito à mão. `dense` é o que fecha os buracos: um bloco largo obriga a
mudar de linha, e sem ele os blocos pequenos que vêm a seguir não recuavam
para preencher a linha de cima. */
/* ⚠️ `min(300px, 100%)` e não `300px` seco: num tela de 320px o mínimo fixo era
maior que o espaço disponível e a página passava a rolar de lado. Ver
[[dext-responsivo]] — nesta casa nada tem licença para alargar a página. */
.op-grade{
display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr));
gap:22px; align-items:start; grid-auto-flow:row dense;
}
/* ⚠️ `1/-1` e não `span 2`: com auto-fill o número de colunas é desconhecido, e
um `span` maior que a grade cria colunas implícitas — a página passava a
rolar de lado no celular. `1/-1` significa "todas as que houver", seja uma
ou cinco. Reservas e mesas são as duas listas que se repartem por dentro:
dar-lhes a largura toda é o que lhes permite fazer as suas próprias colunas. */
.op-reservas, .op-mesas{ grid-column:1/-1; }
.op-bloco .secao-titulo{ margin-bottom:10px; }
.op-bater{ max-width:none; }
.op-mesas-grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; }
.op-mesa{ display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:var(--raio-sm);
border:1px solid var(--cinza-borda); background:var(--branco); font-size:13px; }
.op-mesa span{ color:var(--cinza-medio); font-size:12px; }
.op-mesa-livre{ border-left:3px solid var(--verde); }
.op-mesa-livre .op-mesa-estado{ color:var(--verde); font-weight:700; }
.op-mesa-ocupada{ border-left:3px solid var(--vermelho-sinal); background:var(--cinza-fundo); }
.op-mesa-ocupada .op-mesa-estado{ color:var(--vermelho-sinal); font-weight:700; }
@media (max-width:820px){ .tabela-fluxo td, .tabela-fluxo th{ text-align:left; } }
/* Zona de perigo (ações destrutivas, ex.: excluir cliente) — discreta, no rodapé. */
.zona-perigo{ margin-top:34px; padding-top:20px; border-top:1px solid var(--cinza-borda); }
.alerta{
background:var(--vermelho-sinal-fundo); border:1px solid #f6c9d3; color:var(--vermelho-sinal);
padding:11px 14px; border-radius:var(--raio-sm); font-size:14px; margin-bottom:20px;
}
.rodape-form{ margin-top:26px; color:var(--cinza-medio); font-size:13px; }
.rodape-form a{ color:var(--vermelho); text-decoration:none; font-weight:600; }
.rodape-form a:hover{ text-decoration:underline; }
.login-esqueci{ margin-top:16px; font-size:14px; }
.login-esqueci a{ color:var(--vermelho); text-decoration:none; font-weight:600; }
.login-esqueci a:hover{ text-decoration:underline; }
/* Responsivo — empilha no celular */
@media (max-width:820px){
.login{ flex-direction:column; }
.login__marca{ flex:none; padding:40px 24px; }
.login__marca .simbolo{ width:56px; height:56px; margin-bottom:14px; }
.login__marca .wordmark{ width:118px; }
.login__form{ flex:none; padding:32px 24px 48px; }
/* Mobile: tira a marca d'água do painel preto (topo) e leva pra área branca,
atrás do login, contida (overflow:hidden do .login__form) — não invade o preto. */
.login__marca::before{ display:none; }
.login__form::before{
content:''; position:absolute; z-index:0; pointer-events:none;
left:50%; top:50%; transform:translate(-50%,-50%);
width:min(135vw, 480px); height:min(135vw, 480px);
background:url('/assets/img/dext-icon.svg') no-repeat center center; background-size:contain;
opacity:.05; /* "D" cinza sutil sobre o branco */
}
}
/* Logotipo, endereço e mapa das Configurações. (A barra superior antiga que
vivia aqui saiu a 27/09/2026: o menu lateral substituiu-a.) */
.logo-atual{ margin-bottom:10px; }
.logo-atual img{ max-height:60px; max-width:220px; background:var(--cinza-fundo); border:1px solid var(--cinza-borda); border-radius:var(--raio-sm); padding:6px; }
.endereco-linha{ display:flex; gap:8px; }
.endereco-linha input{ flex:1; }
.btn-buscar{ white-space:nowrap; padding:0 14px; border:1.5px solid var(--cinza-borda); border-radius:var(--raio-sm); background:var(--branco); font-family:var(--fonte-texto); font-weight:600; font-size:13px; cursor:pointer; }
.btn-buscar:hover{ border-color:var(--preto); }
.mapa-config{ height:320px; border-radius:var(--raio-sm); border:1px solid var(--cinza-borda); overflow:hidden; z-index:0; }
.conteudo{ max-width:1000px; margin:0 auto; padding:40px 22px; }
/* ══════════════════════════════════════════════════════════════════════
🚨🚨 A FAIXA DE INSTALAR TAPAVA O QUE ESTÁ POR BAIXO DELA (03/09/2026).
Ele: *"não consegui selecionar e nem alterar a data de reserva pelo
celular. Clico na data e nada acontece."*
A `.inst-faixa` é `position:fixed` no fundo do ecrã — e **nada abria espaço
para ela**. Medido a 375px na tela de nova reserva: 162px de altura mais
16 de margem, **22% do ecrã**, e por baixo dela estavam três controlos
vivos: o botão de ajuda, o campo «pessoas» e o **campo da data**. Tocar
neles acertava na faixa. Nada acontecia, e nada explicava porquê.
⚠️ **Não era da data**, e é isso que torna o defeito caro: era de tudo o que
calhasse ali. A data foi só onde ele reparou.
⚠️ A altura é MEDIDA em JS e não escrita aqui: a faixa muda de altura com o
idioma, com o aparelho (o texto do iPhone é mais longo — ensina o gesto em
vez de oferecer um botão) e com a rotação. Um número fixo aqui acertava num
caso e falhava nos outros. Ver `partials/instalar-app.php`.
⚠️ E some com ela: a classe sai quando a faixa é dispensada, senão ficava um
buraco de 200px no fundo de todas as telas para sempre. */
body.com-faixa-instalar .conteudo{
padding-bottom: calc(var(--h-faixa-instalar, 200px) + 40px);
}
/* 🚨 E O BOTÃO DE AJUDA SOBE COM ELA. Este não se resolve com espaço no fim da
página: é `fixed` como a faixa, no MESMO canto, com o MESMO `z-index:60` — e
a faixa ganha por vir depois no documento. Medido: um toque no meio do botão
acertava no «Agora não» da faixa. Ou seja, enquanto a faixa estivesse de pé
**a ajuda estava inalcançável em todas as telas**, e ninguém o ligaria à
faixa de instalar. */
body.com-faixa-instalar .ajuda-fab{
bottom: calc(var(--h-faixa-instalar, 200px) + 32px);
}
/* ⭐ TELA COM TABELA LARGA USA O ECRÃ QUE EXISTE (pedido dele, 03/08/2026, num
portátil de 13": "é pra se adaptar a telas menores, mas se tem espaço, quero
que ela se abra o máximo").
Os 1000px são uma largura de LEITURA, boa para formulários e texto corrido, e
má para uma tabela de 8 colunas: sobrava tela à direita e o Diário aparecia
cortado na horizontal. Só que alargar tudo estragava as telas de texto.
⚠️ Por isso a regra é condicional, e a condição é a própria tabela: uma tela
que tenha um `.tabela-wrap` cresce, as outras ficam como estavam. É por isto
que serve para o sistema inteiro sem se ir a cada tela marcá-la à mão.
`@supports` porque o `:has()` não existe em navegadores antigos — lá, fica
nos 1000px de sempre, que é o comportamento de hoje, e nada quebra. */
@supports selector(:has(*)) {
/* ⭐ F11 (13/08/2026, ele: *"alargar o Resumo como se fez com a tabela de
Lançamentos; há tabelas com informação a sair fora e outras apertadas"*).
O Resumo não tem `.tabela-wrap` — são cartões com mini-tabelas — e por isso
ficava nos 1000px com meio tela por usar, com os nomes das categorias a
partir-se em duas linhas dentro de cartões de 308px.
⚠️ A condição continua a ser o CONTEÚDO e não o nome da tela: quem tem
tabela larga (ou a grade do Resumo) cresce, o resto fica como está. */
/* ⭐ A ESCALA TAMBÉM CRESCE (19/08/2026). Ele: *"dá pra deixar essa janela da
escala inteira? Aqui pode aparecer inteira. Tem espaço."*
⚠️ A grelha é `width:100%` da coluna e os chips do turno
(`17:00–23:30 15' ×`) empurram cada dia para ~170px. Com a coluna nos
1000px, sete dias mais o nome e o total não cabiam e a semana ficava
cortada ao meio. A condição continua a ser o CONTEÚDO e não o nome da
tela. */
/* ⭐⭐ O PAINEL TAMBÉM CRESCE (ele, 23/08/2026, com o print de um portátil de
13": *"pode deixar o Dashboard mais largo, inclusive daria pra não ter
algumas janelas precisando de barra de rolagem"*).
🚨 E as barras de rolagem que ele viu são consequência DISTO, não um defeito
à parte: o painel é uma grelha de peças de 300px mínimos, e nos 1000px cabem
três — a *"Aproveitamento geral"* e a *"A equipe no período"* ficavam com
~370px cada, e as tabelas de 4 e 5 colunas lá dentro rolavam de lado. Com
1560px cabem as colunas, e a rolagem some por não ser precisa.
⚠️ A condição continua a ser o CONTEÚDO e não o nome da tela: é o `.dash-sec`
(o painel por seções) e o `.dash-blocos` (o painel de um módulo) que
mandam. Uma tela que um dia mostre uma peça destas cresce sozinha.
⚠️ No celular não muda nada, e não é preciso media query nenhuma: um
`max-width` de 1560px não alarga uma tela de 375px, e lá a grelha das peças
já empilha numa coluna sozinha. */
.conteudo:has(.tabela-wrap),
.conteudo:has(.escala-wrap),
.conteudo:has(.dash-sec),
.conteudo:has(.dash-blocos),
.conteudo:has(.resumo-grade){ max-width:1560px; }
/* Numa tela mista (tabela + formulário), o formulário não deve esticar com
ela: um campo de 1400px de largura não se lê melhor, lê-se pior. */
.conteudo:has(.tabela-wrap) > .form,
.conteudo:has(.tabela-wrap) > .pagina-cabecalho + .form{ max-width:720px; }
}
.conteudo .ola{ font-family:var(--fonte-titulo); font-weight:700; font-size:26px; letter-spacing:-.5px; }
.conteudo .ola-sub{ color:var(--cinza-medio); margin:6px 0 32px; }
.grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.modulo{
background:var(--branco); border:1px solid var(--cinza-borda); border-radius:var(--raio);
padding:22px; box-shadow:var(--sombra);
}
.modulo .ic{
width:44px; height:44px; border-radius:var(--raio); background:var(--menu);
display:flex; align-items:center; justify-content:center; color:var(--destaque-menu); margin-bottom:16px;
}
.modulo .ic svg{ width:23px; height:23px; }
.modulo.em-breve .ic{ color:var(--cinza-medio); background:var(--cinza-fundo); }
.modulo h3{ font-family:var(--fonte-titulo); font-weight:700; font-size:17px; margin-bottom:4px; }
.modulo p{ color:var(--cinza-medio); font-size:13.5px; }
.modulo.em-breve{ opacity:.62; }
/* ⚠️ `.modulo .tag` MORREU a 28/08/2026 — o *"Em breve"* dos módulos por abrir.
🚨 Levava `background:var(--vermelho-sinal-fundo)` escrito à mão, que é o `--vermelho-sinal-fundo`
da paleta letra a letra: a cor do ERRO, num rótulo que não diz erro nenhum.
⭐ Passou a `selo-neutro`, e o tom é uma decisão, não uma cópia: *"Em breve"*
**classifica sem julgar**, que é a definição do neutro. Vermelho ali dizia
*"algo está mal"* de um módulo que apenas ainda não abriu — e a grelha mostra
vários ao mesmo tempo, o que é exatamente o *"se tudo é destaque, nada é"*.
⚠️ O `margin-top:12px` era posicionamento, não peça: fica, com nome de lugar.
Ver `app/Views/modulo.php`. */
.modulo .selo{ margin-top:12px; }
a.modulo{ text-decoration:none; color:inherit; display:block; transition:transform .12s, box-shadow .12s; }
a.modulo:hover{ transform:translateY(-2px); box-shadow:0 16px 44px rgba(17,17,17,.13); }
/* ============================================================
PÁGINAS INTERNAS — cabeçalho, tabela e formulário
============================================================ */
.conteudo-estreito{ max-width:640px; }
.voltar{ display:inline-flex; align-items:center; gap:6px; color:var(--preto); text-decoration:none;
font-size:var(--cap-controle-fonte); font-weight:var(--cap-controle-peso); margin-bottom:18px; background:var(--branco);
border:1px solid var(--cinza-borda); padding:7px 14px 7px 11px; border-radius:999px;
box-shadow:0 2px 8px rgba(17,17,17,.05); transition:border-color .15s, color .15s, box-shadow .15s; }
.voltar:hover{ color:var(--vermelho); border-color:var(--vermelho); box-shadow:0 4px 14px color-mix(in srgb, var(--vermelho) 14%, transparent); }
.pagina-cabecalho{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; }
/* ⭐ A AÇÃO PRINCIPAL NO CABEÇALHO (27/09/2026, do FH Finanças): o título
encolhe e as ações (período + botão) ficam juntas à direita, na mesma linha.
Sem isto o subtítulo comprido empurrava o botão para baixo do mês. */
.pagina-cabecalho > div:first-child{ flex:1 1 240px; min-width:0; }
.pagina-cabecalho > .cab-acoes{ flex:0 0 auto; flex-wrap:nowrap; justify-content:flex-end; }
.pagina-titulo{ font-family:var(--fonte-titulo); font-weight:700; font-size:26px; letter-spacing:-.5px; }
.pagina-sub{ color:var(--cinza-medio); font-size:14px; margin-top:4px; }
/* min-width:0 é o que faz o overflow-x funcionar de fato: sem ele a caixa
herda a largura mínima da tabela e, em vez de rolar por dentro, empurra a
página inteira para o lado no celular. */
.tabela-wrap{ background:var(--branco); border:1px solid var(--cinza-borda); border-radius:var(--raio); overflow-x:auto; min-width:0; box-shadow:var(--sombra); }
.tabela{ width:100%; border-collapse:collapse; font-size:14px; }
.tabela thead th{
text-align:left; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
color:var(--cinza-medio); padding:13px 18px; border-bottom:1px solid var(--cinza-borda);
}
.tabela tbody td{ padding:14px 18px; border-bottom:1px solid var(--cinza-borda); }
.tabela tbody tr:last-child td{ border-bottom:none; }
.tabela .td-nome{ font-weight:600; }
.tabela .linha-inativa{ opacity:.5; }
/* ⭐ MARCADOR COM DONO: `ajuda-fixa` diz ao recolhedor de dicas
(`public/assets/js/dica.js`) que este texto NÃO se esconde atrás de um "?" —
é rótulo, não instrução. Fica com regra própria por duas razões: para o
marcador ter dono no CSS (a varredura de markup sem estilo cobra isso, e com
razão) e porque um rótulo de unidade anda AO LADO do número, não numa linha
só para ele como as ajudas de campo. */
.ajuda-fixa{ display:inline; }
.td-acoes{ text-align:right; white-space:nowrap; }
/* ⭐⭐ AS AÇÕES FICAM PRESAS À DIREITA (26/08/2026). Ele: *"o Desativar tá quase
pra fora quando abre-se um item e a tela retrai."*
🚨 Medido antes de mexer, na tela dos Produtos com um item aberto: o
contentor cai para **606px**, a tabela precisa de **840** e o botão acaba
**215px para fora** — atrás da barra de rolagem lateral, onde ninguém o
procura. E o gesto que ele quer fazer é logo o de desativar.
⭐ Prender a coluna em vez de esconder colunas: **nenhum dado dele
desaparece**, o resto da linha desliza por baixo e o botão está sempre lá.
⚠️ O fundo é obrigatório: sem ele vê-se o texto da linha a passar por baixo
dos botões, que é pior do que o problema original.
⚠️ E o traço à esquerda é o que diz que aquilo está POUSADO por cima — sem
ele parece uma coluna normal que por acaso não se mexe. */
.tabela-acoes-fixas th.td-acoes,
.tabela-acoes-fixas td.td-acoes{
position:sticky; right:0; z-index:2;
background:var(--branco); box-shadow:-8px 0 8px -8px rgba(0,0,0,.14);
}
.tabela-acoes-fixas thead th.td-acoes{ background:var(--branco); }
/* ⚠️ Uma linha marcada muda de fundo, e a célula presa tem de acompanhar —
senão fica um retângulo branco a flutuar sobre a linha realçada. */
.tabela-acoes-fixas tbody tr:hover td.td-acoes{ background:var(--cinza-fundo); }
/* ⭐⭐ A AÇÃO NA LINHA (18/08/2026, segunda passagem do padrão visual).
🚨 Ela era VERMELHA POR OMISSÃO, e isso é o contrário do que o manual da
marca manda: o vermelho é acento, nunca o quotidiano. Medido nas views: 14
ações saíam vermelhas sem ninguém ter pedido (Editar, Acessar, Aprovar,
"Preencher eu mesmo"), 12 tinham `link-neutro` para as acalmar, e 11 eram
vermelhas de propósito. A MESMA ideia, três roupas.
⚠️ Em `/reservas/clientes` isto são **537 "Editar" a vermelho** num tela só.
⭐ Passam a existir DOIS estados e não três: **normal** (tinta) e
**destrutivo** (vermelho). Quem destrói é o único a gritar.
⚠️ Não vira botão: a lista de clientes tem 537 linhas, e 537 cápsulas com
borda seriam uma parede. O molde é o do Financeiro, que já usa micro-link
escuro na linha e guarda a cápsula escura para a ação principal da tela. */
.link-acao{
background:none; border:none; padding:0 0 0 14px; cursor:pointer; font-family:var(--fonte-texto);
font-size:13px; font-weight:600; color:var(--texto); text-decoration:none;
}
.link-acao:hover{ text-decoration:underline; color:var(--destaque); }
/* ⚠️ `link-neutro` era o remendo de quem não queria a ação vermelha. Agora o
normal já é sereno, portanto ele não tem trabalho: fica como álias enquanto
as views não o largam, e `test-acao-linha.php` conta-o a descer. */
.link-neutro{ color:var(--texto); }
.link-perigo{ color:var(--vermelho-sinal); font-weight:700; }
.aviso-linha{ display:flex; align-items:stretch; gap:8px; }
.aviso-linha .aviso-item{ flex:1; }
.aviso-excluir{ display:flex; align-items:center; justify-content:center; padding:0 14px; text-decoration:none;
color:var(--vermelho-sinal); font-size:20px; font-weight:700; line-height:1; border:1px solid var(--cinza-borda); border-radius:var(--raio-sm); }
.aviso-excluir:hover{ background:color-mix(in srgb, var(--vermelho-sinal) 8%, transparent); }
/* ⭐⭐ O SELO: A ETIQUETA DE ESTADO DA CASA (18/08/2026).
Ele: *"metade dela tá num nível, a outra metade em outro."* Ao abrir o CSS,
a mesma forma estava escrita **cinco vezes**, com medidas diferentes em cada
uma: `.pill` (12px/600), `.lanc-tag` (11px/700), `.pill-aud` (12px/700),
`.pill-status` e `.pill-perfil` (11px/700). 76 usos nas views.
⭐⭐ **A MIGRAÇÃO ACABOU (26/08/2026).** Ele: *"tem uns módulos que estão ok,
outros ainda falta. Vai um por um e deixa tudo no mesmo nível."* Os cinco
nomes velhos saíram das 36 telas que ainda os usavam e desapareceram daqui:
**há uma forma e um nome só.** O que sobra dos nomes antigos são as regras de
COR (`.pill-ativo`, `.pill-pedido`, `.pill-motivo-*`…), que não desenham
forma nenhuma e por isso não confundem ninguém.
⚠️ As medidas são escolhidas, não a média: 11,5px e peso 700 porque isto é
rótulo e não texto, e `inline-flex` com `gap` para caber um ícone sem
ninguém precisar de reescrever a forma outra vez. */
.selo{
display:inline-flex; align-items:center; gap:5px;
font-size:var(--cap-etiqueta-fonte); font-weight:var(--cap-etiqueta-peso); line-height:1.45;
padding:var(--cap-etiqueta-pad); border-radius:999px; white-space:nowrap;
}
/* ⭐⭐⭐ A PALETA DO SELO — cinco tons, e cada um com um trabalho.
Ele, 26/08/2026: *"alguns até colorido, pra dar destaque e deixar mais
bonito."* ⚠️ Cinco, e não um arco-íris: **se tudo é destaque, nada é.** Um
sexto tom tem de justificar o que os cinco não dizem.
neutro classifica sem julgar (o tipo, a unidade, a origem)
ok está como devia (ativo, conferido, pago)
alerta pede atenção, não é erro (por conferir, vence hoje)
perigo está errado ou em falta (sem preço, em atraso, negativo)
marca destaque da casa, e o mais raro: use-se UM por tela
⚠️ Fundo lavado e texto forte — nunca o contrário. É a regra da casa:
*"cor forte só em selo pequeno; superfície grande leva cor em traço"*, e um
selo com fundo saturado transforma-se ele próprio em superfície. */
.selo-neutro{ background:var(--cinza-fundo); color:var(--cinza-medio); }
.selo-freela { background:var(--roxo-fundo); color:var(--roxo); }
.selo-ok { background:var(--verde-fundo); color:var(--verde); }
.selo-perigo { background:var(--vermelho-sinal-fundo); color:var(--vermelho-sinal); }
/* ⚠️ `--vermelho` É a cor da marca: o `layout.php` aponta-lhe o `--destaque`
escolhido pela empresa. Escrever um hexadecimal aqui dava a cor da Dext na
casa dele — e a folha de papel já ensinou essa lição uma vez. */
.selo-marca { background:color-mix(in srgb, var(--vermelho) 10%, transparent);
color:var(--vermelho); }
/* ⚠️ Os dois nomes antigos das cores ficam, e apontam para os novos: são 30
usos em telas que já estão certas, e renomeá-los agora era mexer em trinta
lugares para não mudar um pixel. Morrem quando alguma delas for tocada. */
.pill-ativo{ background:var(--verde-fundo); color:var(--verde); }
.pill-inativo{ background:var(--cinza-fundo); color:var(--cinza-medio); }
.vazio{ background:var(--branco); border:1px dashed var(--cinza-borda); border-radius:var(--raio); padding:40px; text-align:center; color:var(--cinza-medio); }
/* Formulário */
.form{ background:var(--branco); border:1px solid var(--cinza-borda); border-radius:var(--raio); padding:26px; box-shadow:var(--sombra); }
/* ⭐⭐ AS SECÇÕES DE UMA TELA DE DEFINIÇÕES (18/08/2026).
Ele: *"a tela tá indo muito além do que precisa, tá indo muito pra baixo a
rolagem."* Medido em `/pessoas/config`: **10 campos em 1.828px**.
⚠️ A causa não era espaçamento a mais, era FORMA: três seções numa coluna de
640px só podem ir para baixo. Aqui elas ficam lado a lado quando há largura,
e empilham quando não há.
⚠️ Sem cartão dentro de cartão: quem desenha a moldura é o `.form`; estes
blocos só organizam. `align-items:start` para uma seção curta não esticar até
à altura da vizinha. */
.cfg-blocos{ display:grid; gap:14px 28px; align-items:start; grid-template-columns:minmax(0,1fr); }
/* 🐞 29/09/2026 (auditoria no celular): sem coluna declarada abaixo dos 900px, a
coluna automática crescia até ao conteúdo mais largo — o código do widget (um
``, que não quebra) — e as Configurações de Clientes rolavam para o lado
(542px num telemóvel de 375). `minmax(0,1fr)` deixa-a encolher; o código rola
dentro da própria caixa, que já tem `overflow-x:auto`. */
@media (min-width:900px){ .cfg-blocos{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* ⭐⭐ A LINHA COM MARCA DE TIPO (18/08/2026, pedido dele: os cards de mesa "no tamanho
da linha"). A cor à esquerda diz o TIPO sem gastar uma coluna — na lista de
fichas ela substituiu a coluna "Tipo" inteira, e as 22 intermediárias
deixaram de pagar três colunas de traços só para existir.
⚠️ A barra é do PRIMEIRO td e não do tr: border em não pinta igual em
todos os browsers, e no celular (tabela→cartão) o td vira a borda do
próprio cartão sem regra nova.
Os nomes das cores são PAPÉIS: aceso é o que a tela julga, apagado é o que
está fora do julgamento. Outra lista pode usar os mesmos três papéis. */
🚨 O nome `linha-barra` JÁ EXISTIA (`.linha-barra{display:flex}`, das análises
de reservas) e eu escolhi-o às cegas: as minhas linhas ficaram flex e a tabela
perdeu o alinhamento das colunas no computador. Chama-se `linha-marca`.
⚠️ Classe nova pede uma busca pelo nome ANTES, não depois. */
.linha-marca > td:first-child{ border-left:3px solid var(--linha-cor, var(--cinza-borda)); }
.linha-tipo-venda{ --linha-cor:var(--destaque); }
.linha-tipo-intermedia{ --linha-cor:var(--cinza); }
.linha-tipo-revenda{ --linha-cor:var(--cinza-medio); }
/* O primeiro título de cada bloco não empurra: quem separa é a grelha. */
.cfg-bloco > .secao-titulo:first-child{ margin-top:0; }
/* ⚠️ Nem toda a seção quer meia largura. A lista de documentos MEDIU 436px a
542 de largo e **739px** a 437: estreitá-la fazia-a crescer mais do que a
coluna poupava. Quem tem uma lista larga por dentro fica com a linha toda. */
@media (min-width:900px){ .cfg-bloco-largo{ grid-column:1 / -1; } }
/* ⭐ O CARTÃO DA CASA (11/08/2026).
⚠️ **Esta classe era usada em 7 lugares do HTML e NUNCA existiu no CSS.** A
tela das Tarefas inteira — o formulário, as subtarefas, os anexos, os
comentários e o gerir projetos — desenhava-se como blocos transparentes sobre
o fundo cinzento da página. É a explicação mecânica de porque ele olhou para
o Gestor e disse *"parece que foi feito um rascunho"*: ao lado do `.form` do
Financeiro, era mesmo outro produto.
Mesmo corpo do `.form`, SEM padding: quem a usa (`.tar-form`, `.tar-bloco`,
`.tar-gerir`, `.exec-desc`) já traz o seu, e impor um aqui somava dois. */
.cartao{ background:var(--branco); border:1px solid var(--cinza-borda);
border-radius:var(--raio); box-shadow:var(--sombra); }
.form-linha{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
/* 🚨 O `min-width:0` que falta na CÉLULA, e não no campo — 29/08/2026.
Ele mandou um print do iPad com os campos por cima uns dos outros. Numa
grelha, uma célula `1fr` recusa-se a encolher abaixo do seu conteúdo mínimo
(`min-width` vale `auto`, não zero), e o widget de data do Safari é bem mais
largo que o do Chrome — a célula do Dia estica e passa por cima da vizinha.
⚠️ Já se tinha tentado consertar isto na linha do `input[type=date]` (a regra
`min-width:0` mais acima), mas quem transborda numa grelha é a CÉLULA — o
filho direto —, e a célula é o `.campo`.
⭐ MEDIDO ANTES DE ESCREVER, porque esta regra toca 35 telas e nesta casa já
se mediu mal uma vez: Lançamentos, Configurações, Config do Operacional e
Novo colaborador — **28 células, zero mudaram de posição ou de largura**.
A regra é inerte onde nada transborda; só age onde já estava errado.
🚨 E é o único conserto desta leva que NÃO consegui provar a falhar: sem um
iPad, não reproduzo o defeito. O Chromium redistribui as colunas em vez de
as sobrepor. Fica escrito: **isto é um conserto por diagnóstico, e espera
confirmação dele na tela.** */
.form-linha > *{ min-width:0; }
/* 🚨 SEM O `.form` À FRENTE — 26/08/2026, na auditoria.
A regra estava presa a `.form`, e o `.campo input` logo acima **não está**.
Resultado: numa tela que não abre ` |