/* base.css -- fundo, paleta e regra de alvo de toque (PRD §4, §4.2, §4.3; RF-13, RF-17, CA-06). Compartilhado por toda `ui/telas/*`. PROIB duplicar estes valores em telas.css -- telas.css só acrescenta a faixa de 5px por fluxo, a marca de cor cheia por tela e o arranjo (grade) dos grupos de opção específicos de cada tela. ============================================================================ VISUAL NOVO 16/09 -- docs/visual-novo-contrato.md §2 (paleta e tipografia) ============================================================================ Mock aprovado pelo dono nas 8 rodadas: `tests/demo-terminal-visual-novo.html`. Paleta azul-marinho / cinza / azul-claro no lugar do preto e branco de 19/08. Não é gosto: a tela fica ligada o dia inteiro sob luz de galpão -- fundo escuro reflete menos -- e o azul- marinho cansa menos que o preto puro. CORES SÓ COM SIGNIFICADO (contrato §1.5): verde = ok / produzindo / enviado / boas / dentro do esperado / ordem completa / A ação principal; vermelho = ruim / parado / ruins / cancelar / "não sou eu"; amarelo = pendente / editado / faltam; azul-claro = selecionado / esta máquina / setup. TODO O RESTO é branco, cinza-claro e os azuis da paleta. O design system de 19/08 dava uma cor por CATEGORIA DE AÇÃO (âmbar pausa, roxo inspeção, ciano setup) -- isso saiu: os nomes `--ambar`, `--roxo`, `--ciano` continuam declarados (a suíte t21a confere que existem e telas.css os usa) mas APONTAM para as cores com significado (âmbar -> amarelo; roxo e ciano -> azul). UMA FONTE SÓ (contrato §2): -apple-system, "SF Pro Text", "Segoe UI", Roboto, system-ui. Escala de 5 tamanhos: 26 título · 22/32/40 número de destaque · 17 corpo · 15 subtítulo · 13 rodapé e nome de seção. Raios: grupo 12 px, botão 14 px. T-31 (polimento visual mobile-first) continua valendo: o alvo é celular (360-430px), com layout fluido que também não quebra em tablet/desktop (breakpoints medidos pela suíte: 360x640 e 1280x800). Regra geral -- todo alvo interativo nasce GRANDE e OCUPA A LARGURA do container por padrão; quem precisa de um grupo de opções lado a lado (teclado numérico, grade de máquinas, ...) diz isso em telas.css via `display: grid` no CONTAINER -- nunca reduzindo a altura/o piso do próprio alvo. */ :root { /* ---------------------------------------------------------------- superfícies (escuro) */ --bg: #0F1D30; /* fundo da aplicação e da tela */ --panel: #182A42; /* grupo de linhas, cartão, campo do teclado */ --panel2: #213754; /* linha em destaque, botão neutro, tecla */ --line: rgba(150, 180, 220, .22); /* separador entre linhas de um grupo, bordas */ /* ------------------------------------------------------------------------------- texto */ --ink: #F4F7FB; /* títulos, corpo, números */ --ink2: #A7B7CC; /* subtítulo, rodapé, nome de seção */ --ink3: #6F8299; /* chevron, sugestão em cinza, "livre" */ /* ------------------------------------------------------ as QUATRO cores com significado */ --azul: #5AB0FF; /* selecionado / esta máquina / setup */ --verde: #34C759; /* ok / produzindo / a ação principal */ --verde-claro: rgba(52, 199, 89, .22); /* fundo do MINHA ORDEM e das faixas OK */ --vermelho: #FF5A4E; /* ruim / parado / cancelar / não sou eu */ --amarelo: #FFCC4D; /* pendente / editado / faltam */ --amarelo-claro: rgba(255, 204, 77, .18); /* fundo de "faltam distribuir", aviso */ --vermelho-claro: rgba(255, 90, 78, .18); /* fundo de FALTA / recusado */ --azul-claro: rgba(90, 176, 255, .18); /* fundo de "esta máquina" / setup */ /* SOBRA DA INSPEÇÃO (dono, 10/10; maquetes sobra2 y02..y05): LARANJA = sobra (peça além do pedido). Só nas telas da sobra -- não é aviso nem falta (âmbar/vermelho continuam com o sentido de sempre). */ --laranja: #FF9F0A; --laranja-claro: rgba(255, 159, 10, .18); --texto-sobre-laranja: #2B1700; /* Texto ESCURO sobre as cores cheias (mock: #06301a sobre verde, #062038 sobre azul): contraste ≥ 7:1 nos dois; branco sobre o verde #34C759 ficaria em 2,3:1. Vermelho cheio leva texto BRANCO (#fff sobre #FF5A4E = 3,3:1 em 17px bold, aceito no mock A3). */ --texto-sobre-verde: #06301A; --texto-sobre-azul: #062038; --texto-sobre-amarelo: #3A2A00; /* Tons escuros (:active, borda inferior do `.t`) e brilhos (`.t` de icones.js). */ --verde-d: #248F3F; --verde-g: rgba(52, 199, 89, .28); --ambar-d: #C99A2E; --ambar-g: rgba(255, 204, 77, .26); --azul-d: #2F7FC9; --azul-g: rgba(90, 176, 255, .26); --vermelho-d: #C9433A; --cinza: #2A4160; --cinza-d: #213754; /* botão indisponível -- fica, nunca some */ /* ------------------------------------------------------- nomes de CATEGORIA (19/08) Mantidos porque telas.css e a suíte os citam; apontam para as cores COM significado (contrato §1.5). Roxo (inspeção) e ciano (setup) viram azul; âmbar vira amarelo. */ --ambar: var(--amarelo); --roxo: var(--azul); --roxo-d: var(--azul-d); --roxo-g: var(--azul-g); --ciano: var(--azul); --ciano-d: var(--azul-d); --ciano-g: var(--azul-g); /* ------------------------------------------------------------------- nomes ANTIGOS `--fundo`, `--cartao`, `--texto`, `--texto-fraco`, `--borda-neutra` continuam apontando para os novos (contrato §2): telas.css os usa em 100+ lugares. `--cartao` é o GRUPO (`--panel`): no mock não existe cartão-dentro-de-cartão, o grupo senta direto no fundo. */ --fundo: var(--bg); --cartao: var(--panel); --texto: var(--ink); --texto-fraco: var(--ink2); --borda-neutra: var(--line); /* Piso de alvo de toque (PRD princípio 6, RF-13): 76px, não os 56px de guia genérico -- com luva o mínimo prático é 15-20mm. Mantido em variável para não duplicar o número literal do config.js (ALVO_MIN_PX) em CSS e em JS sem um único ancoradouro visível. O mock desenha teclas de 60px e "texto" de 44px; AQUI todo alvo continua em 76px -- a suíte mede e o contrato §1.2 é explícito. */ --alvo-min-px: 76px; /* Forma (contrato §2): grupo 12px, botão 14px. `--raio-tela` fica em 0 -- a tela não é mais um cartão arredondado sobre o fundo, ela É o fundo. */ --raio: 12px; --raio-pequeno: 12px; --raio-botao: 14px; --raio-tela: 0; --sombra-cartao: none; --espaco: 8px; /* Tipografia (contrato §2) -- os cinco tamanhos, para telas.css não repetir números. */ --fonte: -apple-system, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif; --tam-titulo: 26px; --tam-numero: 22px; --tam-numero-3: 32px; --tam-numero-2: 40px; --tam-corpo: 17px; --tam-sub: 15px; --tam-rodape: 13px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font: var(--tam-corpo)/1.4 var(--fonte); -webkit-text-size-adjust: 100%; } h1, h2, h3, p { margin: 0; } /* Números NUNCA dançam ao atualizar (design system seção 2): largura de dígito fixa. Uma contagem que muda de largura a cada segundo parece erro de sistema para quem olha de longe. */ h1, h2, h3, [data-teclado-valor], [data-estado], output, td, th, b { font-variant-numeric: tabular-nums; } /* A TELA. Mobile-first: largura-alvo 360-430px, centralizada e sem esticar feio em tablet/desktop (a suíte também mede em 1280x800 -- max-width só limita a LARGURA visual, a altura de cada alvo é sempre a mesma, então não afeta nenhuma medição de piso). Visual novo: a tela tem a MESMA cor do fundo -- os grupos (`--panel`) é que se destacam. */ [data-tela] { background: var(--bg); min-height: 100%; width: 100%; max-width: 480px; margin: 0 auto; padding: 10px 12px 24px; display: flex; flex-direction: column; align-items: stretch; gap: var(--espaco); } /* CA-06 -- PROIB filtrar por [data-alvo]: a regra tem que pegar TODO elemento interativo, não só os que o autor marcou. `alvo.js` mede exatamente esta mesma lista de seletores em tempo de execução -- esta regra de CSS é a primeira linha de defesa, `alvo.js` é a prova. Botão GRANDE, ocupando a largura toda por padrão (o pedido do dono): quem precisa de um alvo menor/lado-a-lado dentro de um grupo de opções faz isso no CONTAINER (telas.css, `display: grid`) -- o item nunca abre mão do piso de 76px nem do próprio `width: 100%`, que numa célula de grade só significa "preencher a célula". Visual novo: botão neutro = `--panel2`, SEM borda (o mock não tem borda em botão), raio 14px, 17px em peso 700 -- o `.btn` do mock. */ button, a, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"]), [onclick] { min-height: var(--alvo-min-px); width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.5em; box-sizing: border-box; padding: 12px 16px; border-radius: var(--raio-botao); border: 0; background: var(--panel2); color: var(--ink); font: inherit; font-size: var(--tam-corpo); font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } button:active, [role="button"]:active { transform: translateY(2px); filter: brightness(1.15); } button:disabled, [aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; } /* Foco visível (acessibilidade, mantido do tema anterior): anel azul de 3px, o mesmo azul de "selecionado" -- teclado físico e leitor de tela continuam achando o alvo. */ button:focus-visible, a:focus-visible, select:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; } input[type="time"] { justify-content: flex-start; font-weight: 500; background: var(--panel); } /* `data-alvo` é marca semântica (documentação do papel do elemento), nunca filtro de seleção -- ver CA-06. Elementos com exceção revisada usam `data-alvo-excecao=""`, que NÃO os isenta desta regra de CSS; a exceção é sobre a MEDIÇÃO/relato, não sobre o piso visual, que continua valendo por padrão. */ [data-alvo-excecao] { /* nenhuma regra própria -- documentação apenas; ver alvo.js para o efeito na medição. */ } /* Verde/amarelo/vermelho reservados para estado (PRD §4.2, contrato §1.5) -- classes utilitárias únicas para os três estados; PROIB aplicar em botão neutro fora de [data-estado]. "parado" é VERMELHO no visual novo (antes âmbar): parado é o que está mal. */ [data-estado="rodando"] { color: var(--verde); font-weight: 700; } [data-estado="parado"] { color: var(--vermelho); font-weight: 700; } [data-estado="critico"] { color: var(--vermelho); font-weight: 700; } /* Ícone + palavra sempre (PRD §4.2): nenhum alvo interativo pode ficar só com ícone. */ .alvo-icone-palavra { display: inline-flex; align-items: center; gap: 0.5em; } /* ========================================================================================== O BOTÃO `.t` (design system seção 3, 19/08) -- `componentes/icones.js#botaoAcao`. ========================================================================================== Nenhuma tela o usa hoje (as telas montam Regras que NÃO podem ser negociadas por falta de espaço: altura mínima 76px (o piso da suíte, acima dos 72 do documento) -- se não couber, corte CONTEÚDO, nunca a altura. */ .t { min-height: var(--alvo-min-px); width: 100%; border: none; border-radius: var(--raio-botao); padding: 14px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: relative; overflow: hidden; background: var(--panel2); color: var(--ink); } /* A AÇÃO DOMINANTE de cada tela: largura inteira, no topo da grade, deitada. Uma por tela. */ .t.full { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 14px; padding: 16px 14px; } .t .ico { width: 44px; height: 44px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 255, 255, .12); } .t.full .ico { width: 48px; height: 48px; } /* Traço, nunca preenchimento (seção 7) -- o mesmo desenho lido a 1 metro de distância. */ .t .ico svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .t.full .ico svg { width: 30px; height: 30px; } .t .lb { font-size: var(--tam-corpo); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; color: inherit; text-transform: uppercase; } .t.full .lb { font-size: 20px; text-align: left; } /* A LINHA DE APOIO diz o EFEITO, não repete o rótulo. */ .t .sb { font-size: var(--tam-rodape); font-weight: 500; color: inherit; opacity: .8; letter-spacing: 0; margin-top: 0; text-transform: none; } .t.full .sb { text-align: left; margin-top: 2px; } /* Variantes -- só as cores com significado sobrevivem: verde (principal), vermelho (destrutivo), azul (setup/selecionado). Âmbar/roxo/ciano caem nas mesmas duas (ver :root). */ .t.g { background: var(--verde); color: var(--texto-sobre-verde); } .t.a { background: var(--ambar); color: var(--texto-sobre-amarelo); } .t.b { background: var(--azul); color: var(--texto-sobre-azul); } .t.p { background: var(--roxo); color: var(--texto-sobre-azul); } .t.c { background: var(--ciano); color: var(--texto-sobre-azul); } .t.r { background: var(--vermelho); color: #fff; } /* INDISPONÍVEL FICA NO LUGAR, apagado -- nunca escondido (regra 3 do documento). */ .t.off { background: var(--panel); color: var(--ink3); box-shadow: none; } .t.off .lb { color: var(--ink3); } .t.off .sb { color: var(--ink3); } .t.off .ico { background: rgba(255, 255, 255, .05); } .t.off .ico svg { stroke: var(--ink3); } /* Terciário (voltar, encerrar turno): presente, mas claramente fora da hierarquia -- o `.btn.texto` do mock: transparente, azul, peso 500. */ .t.ghost { background: transparent; border: 0; box-shadow: none; padding: 13px 10px; color: var(--azul); } .t.ghost .lb { font-size: var(--tam-sub); color: var(--azul); font-weight: 500; text-transform: none; } .t.ghost .sb { color: var(--ink2); } .t.ghost .ico { width: 32px; height: 32px; background: transparent; } .t.ghost .ico svg { width: 20px; height: 20px; stroke: var(--azul); } /* Feedback tátil visível: comprime ao toque. */ .t:active { transform: translateY(2px); } .t.off:active, .t.ghost:active { transform: none; } /* Grade de ações: 2 colunas, contínua, sem divisórias entre categorias (seção 5). */ .grade-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }