/* telas.css -- identidade por fluxo (faixa de 5px, PRD §4.2/§8), a marca de cor cheia por
   tela, os grupos de linhas do visual novo (docs/visual-novo-contrato.md §2/§3, mock
   `tests/demo-terminal-visual-novo.html`) e o arranjo em grade dos grupos de opção
   específicos de cada tela (T-31, polimento visual mobile-first).
   Depende de base.css (paleta, piso de alvo, botão cheio-de-largura por padrão) -- PROIB
   duplicar variáveis aqui. PROIB mudar DOM/JS: toda regra abaixo usa só os atributos que as
   telas já emitem (`[data-tela]`, `[data-fluxo]`, `[data-pergunta]`, `[data-cor-cheia]`,
   `[data-contorno]`, `[data-estado]`, e os `data-*` próprios de cada tela/componente) e os
   atributos NOVOS do contrato §3 (`[data-secao]`, `[data-grupo]`, `[data-grupo-linha]`, ...).

   VISUAL NOVO 16/09 -- o que mudou de verdade neste arquivo:
   - a tela deixou de ser um cartão sobre o fundo: `[data-pergunta]` é transparente e os
     GRUPOS (`--panel`, raio 12, separador 1px `--line`) sentam direto no fundo, como no mock;
   - uma fonte, cinco tamanhos (26/22-32-40/17/15/13) -- todos em px, via `--tam-*`;
   - cores só com significado (§1.5): o que era âmbar-por-categoria (pausa, refugo) virou
     neutro ou amarelo-de-pendência; roxo (qualidade) virou azul-de-selecionado;
   - alvos de toque: NENHUM piso caiu. O mock desenha teclas de 60px e links de 44px; aqui
     tudo continua em `--alvo-min-px` (76px) porque a suíte mede em 360x640 e 1280x800. */

/* ======================================================================================
   1. FAIXA DE 5px NO TOPO -- identidade do fluxo (PRD §8). No visual novo a faixa é NEUTRA
   (`--panel2`) em todos os fluxos de produção: cor só com significado (§1.5), e "estar no
   fluxo de iniciar" não é um estado. Sobram as duas com significado: setup = azul (§1.5),
   pausa = vermelho (parado). O default cobre qualquer fluxo fora da lista.
   ====================================================================================== */
[data-fluxo] {
  border-top: 5px solid var(--panel2);
}
[data-fluxo="identificacao"] { border-top-color: var(--panel2); }
[data-fluxo="contexto"]      { border-top-color: var(--panel2); }
[data-fluxo="iniciar"]       { border-top-color: var(--panel2); }
[data-fluxo="finalizar"]     { border-top-color: var(--panel2); }
[data-fluxo="repouso"]       { border-top-color: transparent; }
[data-fluxo="setup"]         { border-top-color: var(--azul); }
[data-fluxo="pausa"]         { border-top-color: var(--vermelho); }
[data-fluxo="qualidade"]     { border-top-color: var(--panel2); }

/* ======================================================================================
   2. COR CHEIA -- UMA por tela, só na ação principal (PRD §4.2, contrato §1.5: verde é "a
   única ação principal"). `alvo.js`/o `validate` (RF-17) conferem no máximo 1 por tela.
   `[data-contorno]` é o segundo nível -- ação frequente, mas não a principal da tela:
   contorno verde, fundo neutro, nunca duas cores cheias competindo.
   ====================================================================================== */
[data-cor-cheia] {
  background: var(--verde);
  color: var(--texto-sobre-verde);
  border: 0;
  font-size: 20px;
  font-weight: 700;
  box-shadow: none;
  /* Alvo principal, generoso (o pedido do dono: o maior botão da tela) -- o `.btn.primario
     .grande` do mock. Continua sendo só o PISO: qualquer `style.minHeight` inline já gravado
     pela própria tela (RF-90/RF-101 -- ex. finalizar.js 112px, pausa.js 160px) sempre GANHA
     deste valor porque estilo inline tem prioridade sobre regra de folha de estilo. */
  min-height: max(var(--alvo-min-px), 20vh, 128px);
}
[data-cor-cheia]:active {
  background: var(--verde-d);
}
/* Legenda dentro do botão verde (repouso, `<small>`): mesma cor escura, menor. */
[data-cor-cheia] small,
[data-cor-cheia] [data-repouso-legenda] {
  color: var(--texto-sobre-verde);
}

/* Contrato §3: `[data-tamanho="medio"]` -- o `.btn.primario.medio` do mock (56-64px). Aqui
   vence o piso de 128px do cor-cheia mas NUNCA desce de 76px (§1.2, a suíte mede). Usado em
   CONFIRMAR da confirmação de fim, OK · GRAVAR do inventário, CONFIRMAR RECEBIMENTO. */
[data-cor-cheia][data-tamanho="medio"] {
  min-height: var(--alvo-min-px);
  font-size: var(--tam-corpo);
}

[data-contorno] {
  background: var(--panel);
  color: var(--verde);
  border: 2px solid var(--verde);
  font-weight: 700;
}

/* Contrato §3: `[data-cor-perigo]` -- vermelho cheio, texto branco (Cancelar / Não sou eu /
   REINICIAR). É a ÚNICA cor cheia que pode conviver com o verde na mesma tela, porque diz o
   contrário dele. */
[data-cor-perigo] {
  background: var(--vermelho);
  color: #fff;
  border: 0;
  font-weight: 700;
}
[data-cor-perigo]:active {
  background: var(--vermelho-d);
}

/* Contrato §3: `[data-verde-claro]` -- o MINHA ORDEM do repouso: fundo verde translúcido,
   texto verde, borda fina verde. É "quase principal": o caminho mais frequente do dia, mas
   não a ação que grava. */
[data-verde-claro] {
  background: var(--verde-claro);
  color: var(--verde);
  border: 1.5px solid rgba(52, 199, 89, .5);
  font-weight: 700;
}
[data-verde-claro] small,
[data-verde-claro] [data-repouso-legenda] {
  color: var(--verde);
}

/* Exceção documentada no próprio `repouso.js` ("Elemento MAIS ALTO da tela (PRD 8.1):
   caminho mais frequente e mais barato"): este botão é NEUTRO (sem `[data-cor-cheia]`, de
   propósito -- cor cheia é reservada a estado/ação, não a "o mais usado"), mas precisa ficar
   MAIOR que a cor cheia da mesma tela, para nunca inverter a hierarquia.

   T1 (2026-08-12): a borda era NEUTRA e o deck original a desenhava TRACEJADA -- as duas
   coisas lêem como campo desativado, justamente no alvo que mais precisa parecer disponível.
   Visual novo: verde-claro (mock A1 -- `.btn.verde-claro.alto`, 80px). */
[data-repouso-identificar] {
  min-height: max(var(--alvo-min-px), 17vh, 112px);
  background: var(--verde-claro);
  border: 1.5px solid rgba(52, 199, 89, .5);
  color: var(--verde);
  font-size: 20px;
  font-weight: 700;
}
/* MINHA ORDEM (contorno no DOM de hoje): o mock o desenha em verde-claro e mais alto que os
   neutros (80px). Quando a frente trocar `data-contorno` por `data-verde-claro`, a regra de
   cima assume -- os dois valem o mesmo. */
[data-repouso-finalizar] {
  background: var(--verde-claro);
  border: 1.5px solid rgba(52, 199, 89, .5);
  color: var(--verde);
  min-height: max(var(--alvo-min-px), 80px);
}
[data-repouso-finalizar] [data-repouso-legenda] { color: var(--verde); }
/* INICIAR ORDEM: `.btn.primario.grande` do mock -- 92px, 20px. */
[data-repouso-iniciar] {
  min-height: max(var(--alvo-min-px), 92px);
  font-size: 20px;
}

/* T1 -- RÓTULO + LEGENDA dentro do mesmo botão. A legenda responde "isso é para mim?" antes
   do toque: sem ela, "SETUP" e "INSPEÇÃO" convidam o operador de produção a entrar por
   engano numa tela que é do preparador e do inspetor.

   `flex-direction: column` é obrigatório aqui: base.css põe TODO botão em `flex-direction:
   row`, o que jogaria a legenda ao LADO do rótulo em vez de embaixo -- as duas linhas
   disputando a mesma altura, ambas quebrando no meio. */
[data-repouso-identificar],
[data-repouso-iniciar],
[data-repouso-finalizar],
[data-repouso-setup],
[data-repouso-qualidade],
[data-repouso-material] {
  flex-direction: column;
  gap: 0;
}
[data-repouso-rotulo] {
  display: block;
}
[data-repouso-legenda] {
  display: block;
  margin-top: 2px;
  font-size: var(--tam-rodape);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.85;
}

/* ======================================================================================
   3. CARTÕES -- no visual novo NÃO há cartão-sobre-fundo: `[data-pergunta]` (o bloco que
   toda tela já emite) vira um contêiner TRANSPARENTE que só empilha (gap 8px). Quem tem
   fundo é o GRUPO (`--panel`). `.cartao` (utilitário genérico) e `[data-comprovante]`
   seguem a mesma regra.

   `[data-tela] [data-pergunta]` (descendente, não o próprio [data-tela]): em
   `identificacao.js`/`iniciar.js` a RAIZ da tela carrega `data-pergunta` junto com
   `data-tela` -- esse caso já é tratado por `[data-tela]` em base.css. */
.cartao {
  background: transparent;
  border-radius: var(--raio);
  padding: 0;
}

[data-tela] [data-pergunta],
[data-comprovante],
[data-pausa-tela="em-pausa"] {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espaco);
}

/* Cartões de segundo nível -- item de lista/estado (lista de ordens a finalizar, máquina
   pronta, setup em andamento): são GRUPOS (fundo `--panel`, raio 12, sem borda). */
[data-finalizar-cartao],
[data-contexto-maquina-pronta],
[data-setup-andamento-item] {
  background: var(--panel);
  border: 0;
  border-radius: var(--raio);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

/* Alerta de sessão longa demais (RF-142/CA-68) -- já é `[data-estado="critico"]` (base.css
   tinge fundo/borda); aqui só o espaçamento interno do cartão. */
[data-contexto-aviso-sessao-longa] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--raio);
}

/* Títulos e legendas -- hierarquia tipográfica clara (PRD §4.2, contrato §2: título 26px)
   sem exigir marcação nova: os `data-*-titulo`/`data-*-subtitulo` que cada tela já usa. */
[data-pergunta] > h2,
[data-iniciar-titulo],
[data-iniciar-maquina-titulo],
[data-iniciar-processo-titulo],
[data-pausa-titulo],
[data-setup-titulo],
[data-setup-smed-titulo],
[data-setup-tentativa-titulo],
[data-setup-novo-titulo],
[data-qualidade-origem-titulo],
[data-qualidade-cabecalho],
[data-pausa-pergunta-quantidade],
[data-identificacao-titulo] {
  font-size: var(--tam-titulo);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.02em;
  padding: 6px 4px 0;
}

[data-pergunta] > p:first-child {
  font-size: var(--tam-titulo);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.02em;
  padding: 6px 4px 0;
}

/* Aviso de plausibilidade (RF-99) -- nunca bloqueia (princípio 5), mas é um alerta:
   amarelo = "olhe isto" (§1.5). */
[data-pausa-aviso-plausibilidade] {
  font-weight: 600;
  color: var(--amarelo);
  background: var(--amarelo-claro);
  border: 0;
  border-radius: var(--raio);
  padding: 10px 14px;
}

/* Subtítulos (15px, cinza) -- a linha sob o título do mock (`.titulo-sub`). */
[data-iniciar-subtitulo],
[data-pausa-subtitulo],
[data-qualidade-origem-subtitulo],
[data-repouso-cabecalho],
[data-setup-preparador],
[data-repouso-contadores],
[data-qualidade-ja-lancado],
[data-finalizar-ja-apontadas-etapa],
[data-finalizar-ja-contadas-sessao],
[data-pausa-ja-apontadas],
[data-pausa-ja-contadas],
[data-comprovante-detalhe],
[data-identificacao-dica] {
  font-size: var(--tam-sub);
  color: var(--ink2);
  font-weight: 400;
  padding: 0 4px;
}

/* Repouso: o cabeçalho é o TÍTULO da tela ("Terminal Setor A · quarta, 16/09 · 14:32"):
   26px como no mock A1; contadores centralizados com as bolinhas. */
[data-repouso-cabecalho] {
  font-size: var(--tam-titulo);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.15;
  text-align: left;
  padding: 6px 4px 0;
}
[data-repouso-contadores] {
  text-align: center;
  padding: 10px 4px 0;
  font-size: var(--tam-sub);
}

/* ======================================================================================
   3b. GRUPOS DE LINHAS -- contrato §3: `[data-secao]`, `[data-grupo]`, `[data-grupo-linha]`,
   `[data-valor]`, `[data-ponto]`. É a gramática de TODA tela de apresentação do mock
   (minha ordem, ficha da ordem, confira, confirmação, inventário, estoques).
   ====================================================================================== */
/* Nome de seção: 13px, maiúsculas, cinza, padding 12/16/4 (mock `.secao`). */
[data-secao] {
  font-size: var(--tam-rodape);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink2);
  padding: 12px 16px 4px;
  font-weight: 400;
}
[data-secao]:first-child { padding-top: 4px; }

/* Grupo: fundo `--panel`, raio 12, filhos empilhados com separador de 1px. */
[data-grupo] {
  background: var(--panel);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
[data-grupo] > * + * {
  border-top: 1px solid var(--line);
}

/* Linha: rótulo à esquerda (`<span>` + `<small>` de subtítulo), valor à direita em `<b>`.
   Aceita o `<small>` DENTRO do `<span>` (coluna) ou como irmão (quebra para a 2ª linha).
   `<i data-ponto>` antes do estado. Se a linha for um <button> (tocável, com chevron), a
   regra `button[data-grupo-linha]` abaixo desfaz o visual de botão de base.css. */
[data-grupo-linha] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 12px;
  min-height: 48px;
  padding: 9px 16px;
  font-size: var(--tam-corpo);
  color: var(--ink);
  text-align: left;
}
[data-grupo-linha] > span {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
[data-grupo-linha] small,
[data-grupo-linha] > span > small {
  font-size: var(--tam-rodape);
  color: var(--ink2);
  font-weight: 400;
}
[data-grupo-linha] > small { flex-basis: 100%; }
[data-grupo-linha] > b {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Destaque: fundo `--panel2`, rótulo em 600, valor 22px em 700 (Operador · Máquina ·
   Início → Fim da confirmação; "Faltam produzir" do painel da ordem). */
[data-grupo-linha="destaque"] {
  background: var(--panel2);
}
[data-grupo-linha="destaque"] > span { font-weight: 600; }
[data-grupo-linha="destaque"] > b {
  font-size: var(--tam-numero);
  font-weight: 700;
}
/* Linha tocável (chevron à direita): mesmo desenho de linha, altura do piso de toque,
   sem o fundo/raio de botão de base.css. */
button[data-grupo-linha],
[role="button"][data-grupo-linha] {
  width: 100%;
  min-height: var(--alvo-min-px);
  background: transparent;
  /* Só os três lados: o separador de cima vem de `[data-grupo] > * + *` e não pode ser
     zerado aqui (este seletor é mais específico que o do grupo). */
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  font-weight: 400;
  justify-content: space-between;
}
button[data-grupo-linha]:active { background: var(--panel2); transform: none; }
/* Chevron "›" e emoji de linha (o mock põe o emoji numa caixa de 30px à esquerda). */
[data-grupo-linha] > [data-chevron],
[data-grupo-linha] > [data-cartao-chevron] {
  flex: 0 0 auto;
  color: var(--ink3);
  font-size: 22px;
  line-height: 1;
}
[data-grupo-linha] > [data-emoji],
[data-grupo-linha] > [data-cartao-icone] {
  flex: 0 0 30px;
  font-size: 20px;
  text-align: center;
}
/* Selecionado (escolha de variante / fornecedor / torno): rótulo azul em 700, ✓ azul. */
[data-grupo-linha][data-selecionado],
[data-grupo-linha][aria-pressed="true"] {
  color: var(--azul);
  font-weight: 700;
}
[data-grupo-linha][data-selecionado] small,
[data-grupo-linha][aria-pressed="true"] small { color: var(--azul); }

/* ESTOQUE NÃO ZERADO (09/10): no fornecedor com 0 no MES, a pílula "Usar este fornecedor ·
   estoque não estava zerado" à direita (contorno âmbar); marcada = fundo âmbar, texto escuro. */
[data-iniciar-usar-sem-saldo] {
  flex: 0 1 46%;
  padding: 8px 12px;
  border: 1px solid var(--amarelo);
  border-radius: 10px;
  color: var(--amarelo);
  font-size: var(--tam-rodape);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}
[data-iniciar-usar-sem-saldo][data-marcado] {
  background: var(--amarelo);
  color: #1a1a1a;
}

/* Valor com cor semântica (§1.5) -- vale em qualquer elemento. */
[data-valor="ok"]       { color: var(--verde); }
[data-valor="ruim"]     { color: var(--vermelho); }
[data-valor="pendente"] { color: var(--amarelo); }
[data-valor="azul"]     { color: var(--azul); }
[data-valor="cinza"]    { color: var(--ink3); font-weight: 400; }

/* Bolinha de estado (9px) -- `<i data-ponto="verde">` antes da palavra. Nunca sozinha:
   a palavra vai junto (acessibilidade, sol e daltonismo). */
[data-ponto] {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
  background: var(--ink3);
  font-style: normal;
}
[data-ponto="verde"]    { background: var(--verde); }
[data-ponto="vermelho"] { background: var(--vermelho); }
[data-ponto="azul"]     { background: var(--azul); }
[data-ponto="amarelo"]  { background: var(--amarelo); }
[data-ponto="livre"]    { background: var(--ink3); }

/* Rodapé de grupo / da tela: 13px cinza (mock `.rodape`, `.rodape.interno`). */
[data-rodape] {
  font-size: var(--tam-rodape);
  color: var(--ink2);
  padding: 4px 16px;
}
[data-grupo] > [data-rodape] {
  padding: 4px 16px 12px;
  text-align: center;
  border-top: 0;
}

/* Botão "texto" do mock (`.btn.texto`): transparente, azul, peso 500 -- o nível mais baixo
   da hierarquia (voltar, trocar a máquina, digitar de novo, ver todos os processos, últimas
   ações). Continua com o piso de 76px. `[data-cor-perigo]`-texto = "Não sou eu" vermelho. */
[data-botao-texto],
[data-cabecalho-botao-voltar],
[data-repouso-ultimas-acoes],
[data-iniciar-suporte-link],
[data-iniciar-atividades-voltar],
[data-trocar-op-voltar],
[data-ua-voltar],
[data-material-voltar],
[data-setup-voltar],
[data-ativacao-voltar],
[data-iniciar-painel-voltar],
[data-identificacao-abrir-digitacao],
[data-finalizar-corrigir-voltar],
[data-iniciar-processos-todos],
[data-contexto-abrir-outra],
[data-finalizar-nao-esta-na-lista],
[data-qualidade-escolha-voltar],
[data-iniciar-ocupada-voltar],
[data-ua-copiar-diag] {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--azul);
  font-size: var(--tam-corpo);
  font-weight: 500;
  text-decoration: none;
}
[data-contexto-nao-sou-eu] {
  background: transparent;
  border: 0;
  color: var(--vermelho);
  font-weight: 500;
}
/* O "← Voltar" da casca (app.js) fica FORA de [data-tela]: alinha na mesma coluna de 480px. */
[data-cabecalho-voltar] { display: flex; width: 100%; max-width: 480px; margin: 0 auto; padding: 0 12px; }
[data-cabecalho-botao-voltar] { justify-content: flex-start; padding-left: 8px; }
/* 05/10 (voltar = etapa anterior): apagado durante "Gravando…/Conferindo…" (até o teto de 30 s).
   Não é `disabled` -- o toque chega e o app.js o ignora (docs/voltar-etapa-anterior.md §2.2). */
[data-cabecalho-botao-voltar][data-voltar-bloqueado] { opacity: .35; }
/* 05/10 (voltar = etapa anterior, §1.6): a escolha já feita volta MARCADA quando a pessoa chega
   voltando. Contorno azul, não cor cheia (a cor cheia da tela continua sendo o botão principal).
   Linhas [data-grupo-linha] e o cartão do material ([data-valor="azul"]) já tinham estilo. */
[data-pausa-motivo][data-selecionado],
[data-pausa-vou-embora][data-selecionado],
[data-iniciar-processo][data-selecionado],
button[data-setup-opcao-tipo][data-selecionado],
button[data-setup-peca-item][data-selecionado],
button[data-setup-opcao-maquina][data-selecionado],
button[data-setup-teste-ferramenta][data-selecionado],
[data-trocar-op-resultado][data-selecionado],
[data-ferr-lado][data-selecionado],
[data-ferr-caixa][data-selecionado],
[data-cartao][data-selecionado],
[data-cartao][data-marcado],
[data-cartao][aria-pressed="true"] { outline: 3px solid var(--azul); outline-offset: 2px; }

/* ======================================================================================
   4. GRUPOS DE OPÇÃO EM GRADE -- os "chips" lado a lado (teclado numérico, hora/minuto,
   escolha de máquina/processo curtos). Grade no CONTAINER, nunca reduzindo altura/piso do
   item -- cada botão de dentro continua com min-height herdado de base.css (>=76px) e só
   preenche a própria célula (`width:100%` de base.css já é exatamente "ocupar a célula"). */
[data-teclado-grade] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
/* Tecla (mock `.tecla`): `--panel2`, 24px em peso 500, raio 12. */
[data-teclado-digito] {
  font-size: 24px;
  font-weight: 500;
  border-radius: var(--raio);
}
[data-teclado-apagar] {
  background: var(--panel2);
  border: 0;
  border-radius: var(--raio);
  color: var(--ink);
  font-size: 24px;
  font-weight: 500;
}
/* Tecla de texto (NENHUMA, Ler QR): 15px em 600 (mock `.tecla.texto`). */
[data-teclado-extra] {
  font-size: var(--tam-sub);
  font-weight: 600;
  border-radius: var(--raio);
  letter-spacing: .02em;
}
/* Confirmar do teclado: quando a tela o marca como cor cheia ele é verde; sem a marca fica
   verde-claro -- é a ação do teclado, mas não disputa com a cor cheia da tela. */
[data-teclado-confirmar]:not([data-cor-cheia]) {
  background: var(--verde-claro);
  color: var(--verde);
  border: 1.5px solid rgba(52, 199, 89, .5);
}
[data-teclado-confirmar]:disabled { opacity: .45; }

[data-corrigir-horario-opcoes] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* PAUSA -- "Por que parou?" (mock A8): grupos Máquina · Material · Pessoas como NOME DE
   SEÇÃO (13px cinza) e os motivos como LINHAS de um grupo (emoji + motivo + exemplo em cinza
   + chevron), uma coluna. Antes era grade 2x4 de cartões âmbar/azul por tipo -- a cor por
   tipo saiu (§1.5: cor só com significado). */
[data-pausa-grade-motivos] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
[data-pausa-grupo] {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 1px;
  margin-top: 4px; padding: 12px 16px 4px;
  border-radius: 0;
  background: transparent;
  font-size: var(--tam-rodape); font-weight: 400; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink2);
}
[data-pausa-grupo]:first-child { margin-top: 0; }
[data-pausa-grupo-sub] { font-size: var(--tam-rodape); font-weight: 400; letter-spacing: 0; text-transform: none; opacity: 1; color: var(--ink3); }
[data-pausa-grupo-tipo="nao-planejada"] { background: transparent; color: var(--ink2); border-left: 0; }
[data-pausa-grupo-tipo="planejada"] { background: transparent; color: var(--ink2); border-left: 0; }
[data-pausa-motivo] {
  display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: var(--alvo-min-px); padding: 9px 16px;
  background: var(--panel); border: 0; border-radius: 0;
  border-top: 1px solid var(--line);
  font-weight: 400;
  justify-content: flex-start;
}
/* Primeiro motivo depois do nome do grupo: cantos de cima; último do grupo: cantos de
   baixo (`:has` -- onde não houver suporte, só o canto fica reto). */
[data-pausa-grupo] + [data-pausa-motivo] { border-top: 0; border-radius: var(--raio) var(--raio) 0 0; }
[data-pausa-motivo]:last-child { border-radius: 0 0 var(--raio) var(--raio); }
[data-pausa-motivo]:has(+ [data-pausa-grupo]) { border-radius: 0 0 var(--raio) var(--raio); }
[data-pausa-grupo] + [data-pausa-motivo]:last-child,
[data-pausa-grupo] + [data-pausa-motivo]:has(+ [data-pausa-grupo]) { border-radius: var(--raio); }
[data-pausa-motivo-tipo="nao-planejada"] { border-left: 0; }
[data-pausa-motivo-tipo="planejada"] { border-left: 0; }
[data-pausa-motivo-icone] { flex: 0 0 30px; font-size: 20px; text-align: center; }
[data-pausa-motivo-corpo] { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
[data-pausa-motivo-corpo] b { font-size: var(--tam-corpo); font-weight: 400; line-height: 1.2; }
[data-pausa-motivo-exemplo] { font-size: var(--tam-rodape); color: var(--ink2); font-weight: 400; line-height: 1.25; }
/* Chevron desenhado pelo CSS só quando o DOM não trouxe o seu (`:has`; sem suporte, fica sem). */
[data-pausa-motivo]:not(:has([data-chevron], [data-cartao-chevron]))::after { content: '›'; color: var(--ink3); font-size: 22px; line-height: 1; }

[data-finalizar-hora-opcoes],
[data-finalizar-minuto-opcoes] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
/* Selecionado = AZUL (§1.5), não verde: verde é só a ação principal. */
[data-finalizar-hora-opcao][data-selecionado],
[data-finalizar-minuto-opcao][data-selecionado] {
  background: var(--azul);
  color: var(--texto-sobre-azul);
  border-color: var(--azul);
}
[data-iniciar-grupo-outros],
[data-iniciar-grupo-todos],
[data-iniciar-tipo-processos],
[data-finalizar-processo-opcoes],
[data-finalizar-maquina-opcoes],
[data-contexto-maquina-pronta-escolher-processo],
[data-setup-atalho-processo-opcoes] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* T5 -- ESCOLHA DA MÁQUINA EM GRADE (MANUAL-VISUAL-TELAS T5).
   `iniciar.js` abre uma região só para os botões (`[data-iniciar-maquina-grade]`).
   Três colunas quando o botão é só número + código (Inspeção tem 14 postos); DUAS colunas
   quando os botões carregam o estado da máquina (mock A6 -- `.grade3.maquinas`), porque
   "● produzindo · MARIA · 8477" não cabe em um terço da tela. `:has` -- sem suporte, fica
   em três colunas e o chip quebra linha, nada some. */
[data-iniciar-maquina-grade] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
[data-iniciar-maquina-grade]:has([data-maquina-estado]) {
  grid-template-columns: repeat(2, 1fr);
}
/* O NÚMERO é o rótulo (é o que o operador fala: "prensa 7"); o CÓDIGO é a legenda, e só
   existe para conferir contra a etiqueta colada na máquina. */
[data-iniciar-maquina-grade] > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.1;
  padding: 6px 8px;
  border-radius: var(--raio);
}
[data-iniciar-maquina-numero] {
  font-size: 24px;
  font-weight: 600;
}
[data-iniciar-maquina-codigo] {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink2);
}
/* "em uso" é INFORMAÇÃO, nunca bloqueio: o manual é explícito em não esmaecer. O botão em
   uso fica no tom do GRUPO (`--panel`, mock `.tecla.uso`) e o chip diz quem/OP/tempo. */
[data-iniciar-maquina-em-uso] {
  background: var(--panel);
  border: 0;
}
/* Contrato §3: estado no botão da grade -- o chip leva a cor com significado. */
[data-iniciar-maquina-botao][data-maquina-estado] {
  font-size: 16px;
  font-weight: 600;
}
[data-iniciar-maquina-botao][data-maquina-estado] [data-iniciar-maquina-numero] { font-size: 16px; font-weight: 600; }
[data-iniciar-maquina-botao][data-maquina-estado="produzindo"],
[data-iniciar-maquina-botao][data-maquina-estado="setup"],
[data-iniciar-maquina-botao][data-maquina-estado="parado"] { background: var(--panel); }
[data-iniciar-maquina-chip-uso] {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink2);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}
[data-iniciar-maquina-botao][data-maquina-estado="produzindo"] [data-iniciar-maquina-chip-uso] { color: var(--verde); }
[data-iniciar-maquina-botao][data-maquina-estado="setup"]      [data-iniciar-maquina-chip-uso] { color: var(--azul); }
[data-iniciar-maquina-botao][data-maquina-estado="parado"]     [data-iniciar-maquina-chip-uso] { color: var(--vermelho); }
[data-iniciar-maquina-botao][data-maquina-estado="livre"]      [data-iniciar-maquina-chip-uso] { color: var(--ink3); }
/* Botão da grade que carrega `data-selecionado`/"esta máquina": azul. */
[data-iniciar-maquina-botao][data-selecionado] { background: var(--azul); color: var(--texto-sobre-azul); }

[data-repouso-neutros] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
/* 21/09: com o quarto papel (EXPEDIÇÃO) a linha de neutros virou grade 2x2 -- quatro numa linha
   so cairia abaixo do alvo minimo (76 px) no tablet em pe. */
/* SETUP · INSPEÇÃO · MATERIAL na mesma linha (mock A1, `.grade3 .btn`): 14px, 72->76px. */
[data-repouso-neutros] > button,
[data-repouso-material] {
  font-size: 14px;
  padding: 8px 6px;
}

/* Etapa de origem do defeito (qualidade, RF-04/106): 3 linhas de FATO por botão -- precisa
   empilhar em coluna, não centralizar tudo numa linha só (é o único botão do sistema com
   3 filhos de bloco). */
[data-qualidade-origem-etapa] {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  padding: 12px 16px;
}
[data-qualidade-origem-etapa-processo] {
  font-weight: 700;
  font-size: var(--tam-corpo);
}
[data-qualidade-origem-etapa-detalhe],
[data-qualidade-origem-etapa-quantidade] {
  font-size: var(--tam-rodape);
  color: var(--ink2);
  font-weight: 400;
}

/* Linhas de lista com texto informativo comprido -- lêem melhor alinhadas à esquerda do
   que centralizadas como um chip curto. */
[data-finalizar-motivo-linha],
[data-motivos-linha],
[data-contexto-lista-item],
[data-identificacao-lista-item],
[data-iniciar-resultado],
[data-finalizar-peca-resultado],
[data-setup-linha],
[data-setup-andamento-encerrar],
[data-finalizar-cartao-finalizar] {
  justify-content: flex-start;
  text-align: left;
}

/* Linha em foco na distribuição por motivo (finalizar/qualidade) -- sinal visual de qual
   motivo o teclado embaixo está preenchendo agora (mock D3 `.linha.editando`: fundo
   `--panel2`, valor azul). */
[data-finalizar-motivo-linha][data-focado="true"],
[data-motivos-linha][data-focado="true"] {
  background: var(--panel2);
  border: 0;
}
[data-motivos-linha][data-focado="true"] [data-motivos-qtd] { color: var(--azul); }

/* ======================================================================================
   5. NÚMEROS GRANDES -- o mostrador do teclado numérico (mock `.campo`: 72px, 40px em 700,
   fundo `--panel`). Nasce VAZIO; a sugestão em cinza fica fora, em `[data-ficha-cinza]`
   (fichas.js#montarPergunta). Comprovante ganha o selo verde redondo (mock `.selo`). */
[data-teclado-valor] {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 0;
  border-radius: var(--raio);
  font-size: var(--tam-numero-2);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
  padding: 4px 8px;
}

[data-comprovante-icone] {
  width: 64px;
  height: 64px;
  min-height: 0;
  border-radius: 50%;
  background: var(--verde);
  color: var(--texto-sobre-verde);
  font-size: 34px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 4px auto;
}

[data-comprovante-mensagem] {
  font-size: var(--tam-titulo);
  font-weight: 700;
  letter-spacing: -.02em;
  text-align: center;
}

[data-comprovante-numero-dia] {
  font-size: var(--tam-sub);
  font-weight: 500;
  color: var(--azul);
  text-align: center;
}
/* Resumo do comprovante ("Confira o que vai subir"): um grupo de linhas. */
[data-comprovante-resumo] { background: var(--panel); border-radius: var(--raio); padding: 6px 0; }
[data-comprovante-resumo-titulo] { font-size: var(--tam-rodape); text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); padding: 6px 16px 4px; }
[data-comprovante-resumo-linha] { padding: 9px 16px; font-size: var(--tam-corpo); }
[data-comprovante-resumo-linha] + [data-comprovante-resumo-linha] { border-top: 1px solid var(--line); }

/* ======================================================================================
   MOTIVOS AGRUPADOS POR FAMÍLIA -- `componentes/motivos-por-familia.js`, UM componente em
   DOIS lugares: qualidade e distribuição de refugo da finalização. Mock C1c/C3c: cada
   família é um NOME DE SEÇÃO + um GRUPO de linhas (emoji · motivo · quantidade em vermelho);
   a barra de saldo em verde-claro quando tudo foi distribuído, amarela enquanto falta.
   `[data-tema]` (roxo/âmbar) fica no DOM mas NÃO muda mais cor: são os mesmos "ruins". */
[data-motivos-familia-card] {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
[data-motivos-familia-card] + [data-motivos-familia-card] {
  margin-top: 4px;
}
[data-motivos-familia-cabecalho] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding: 12px 16px 4px;
  font-size: var(--tam-rodape);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink2);
}
/* Soma da família -- quem distribui confere sem somar de cabeça. */
[data-motivos-familia-contador] {
  font-size: var(--tam-rodape);
  min-width: 1.4rem;
  text-align: center;
  padding: 0;
  border-radius: 0;
  letter-spacing: 0;
  color: var(--ink2);
  background: transparent;
}
[data-motivos-grade] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--panel);
  border-radius: var(--raio);
  overflow: hidden;
}
[data-motivos-grade] > button {
  position: relative;
  font-size: var(--tam-corpo);
  font-weight: 400;
  line-height: 1.2;
  padding: 9px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  justify-content: space-between;
  text-align: left;
  gap: 12px;
}
[data-motivos-grade] > button + button {
  border-top: 1px solid var(--line);
}
[data-motivos-rotulo] { flex: 1; min-width: 0; }
/* Família com um motivo só ocupa a linha inteira (mantido: a grade agora é de 1 coluna). */
[data-motivos-largura-cheia] {
  grid-column: 1 / -1;
}
/* Contador na ponta direita da linha (era absoluto no canto do chip). */
[data-motivos-qtd] {
  position: static;
  top: auto;
  right: auto;
  min-width: 2ch;
  height: auto;
  line-height: 1.2;
  border-radius: 0;
  background: transparent;
  color: var(--ink3);
  font-size: var(--tam-corpo);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Motivo com quantidade fica destacado: o número em VERMELHO (são peças ruins, §1.5). */
[data-motivos-marcado] {
  border-width: 0;
}
[data-motivos-marcado] [data-motivos-qtd] {
  color: var(--vermelho);
  font-weight: 700;
}
/* Saldo acima dos cards: some quando não há nada a distribuir. */
[data-motivos-saldo] {
  border-radius: 10px;
  font-size: var(--tam-sub);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  margin: 0 4px 4px;
  background: var(--amarelo-claro);
  color: var(--amarelo);
  border: 0;
}
[data-motivos-saldo][hidden] {
  display: none;
}
[data-motivos-saldo][data-restante="0"] {
  background: var(--verde-claro);
  color: var(--verde);
}

/* --- tema ROXO (qualidade) -- mesmas cores que o âmbar: cor só com significado (§1.5). */
[data-motivos-familia][data-tema="roxo"] [data-motivos-familia-cabecalho] { color: var(--ink2); }
[data-motivos-familia][data-tema="roxo"] [data-motivos-familia-contador] { background: transparent; color: var(--ink2); }
[data-motivos-familia][data-tema="roxo"] [data-motivos-marcado] { border-color: transparent; background: transparent; }
[data-motivos-familia][data-tema="roxo"] [data-motivos-marcado] [data-motivos-qtd] { background: transparent; color: var(--vermelho); }
[data-motivos-familia][data-tema="roxo"] [data-motivos-saldo] { background: var(--amarelo-claro); border: 0; color: var(--amarelo); }
[data-motivos-familia][data-tema="roxo"] [data-motivos-saldo][data-restante="0"] { background: var(--verde-claro); color: var(--verde); }

/* --- tema ÂMBAR (refugo na finalização) -- por decisão do dono (2026-08-13) o botão de
   encerrar NÃO é desabilitado pelo saldo: a barra é o único sinal de que ainda falta
   distribuir, então ela é AMARELA (pendente) enquanto falta e verde quando zerou. --- */
[data-motivos-familia][data-tema="ambar"] [data-motivos-familia-cabecalho] { color: var(--ink2); }
[data-motivos-familia][data-tema="ambar"] [data-motivos-familia-contador] { background: transparent; color: var(--ink2); }
[data-motivos-familia][data-tema="ambar"] [data-motivos-marcado] { border-color: transparent; background: transparent; }
[data-motivos-familia][data-tema="ambar"] [data-motivos-marcado] [data-motivos-qtd] { background: transparent; color: var(--vermelho); }
[data-motivos-familia][data-tema="ambar"] [data-motivos-saldo] { background: var(--amarelo-claro); border: 0; color: var(--amarelo); }
[data-motivos-familia][data-tema="ambar"] [data-motivos-saldo][data-restante="0"] {
  background: var(--verde-claro);
  border-color: transparent;
  color: var(--verde);
}
[data-motivos-teclado] { padding-top: 4px; }

/* ======================================================================================
   T4 -- ESCOLHA DE PROCESSO AGRUPADA POR TIPO DE MÁQUINA (opção B, escolha do dono).
   Só tipos com MAIS DE UM processo viram card (Prensa, Torno manual). Visual novo: o card é
   um grupo (`--panel`) e o cabeçalho, um nome de seção. */
[data-iniciar-secao] {
  font-size: var(--tam-rodape);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink2);
  padding: 12px 16px 4px;
  border-bottom: 0;
}
[data-iniciar-tipo-card] {
  background: var(--panel);
  border: 0;
  border-radius: var(--raio);
  padding: 8px;
}
[data-iniciar-tipo-cabecalho] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding: 4px 8px 0;
  font-size: var(--tam-rodape);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink2);
}
/* O contador avisa ANTES do toque se a pergunta de máquina vem depois. */
[data-iniciar-tipo-contador] {
  background: var(--panel2);
  color: var(--ink2);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0;
}
/* Tipo da máquina sob o nome do processo, na grade de processo único. Miúdo de propósito:
   o alvo é o PROCESSO; o tipo é só a pista de onde ele acontece. */
[data-iniciar-processo-tipo] {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink2);
}

/* Contrato §3: `[data-iniciar-roteiro]` -- a lista do roteiro da OP (mock A5): grupo de
   linhas; feito = rótulo cinza + "feito" verde; producao = rótulo azul; falta = neutro. A
   grade antiga fica sob "Ver todos os processos". */
[data-iniciar-roteiro] {
  background: var(--panel);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
[data-iniciar-roteiro-etapa] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--alvo-min-px);
  padding: 9px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: var(--tam-corpo);
  font-weight: 400;
  text-align: left;
  color: var(--ink);
}
/* Desfaz o crachá genérico de `[data-estado]:not([data-indicador-rede])` (seção 6): mesma
   especificidade (0,2,0), declarado depois -- ganha. Sem isto a etapa ganharia fundo/raio
   de crachá e `data-estado="feito"` não teria layout de linha. */
[data-iniciar-roteiro-etapa][data-estado] {
  display: flex;
  width: 100%;
  padding: 9px 16px;
  border-radius: 0;
  background: transparent;
  gap: 12px;
  font-size: var(--tam-corpo);
  font-weight: 400;
  color: var(--ink);
}
[data-iniciar-roteiro-etapa] + [data-iniciar-roteiro-etapa] { border-top: 1px solid var(--line); }
[data-iniciar-roteiro-etapa] > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
[data-iniciar-roteiro-etapa] small { font-size: var(--tam-rodape); color: var(--ink2); font-weight: 400; }
[data-iniciar-roteiro-etapa] > b { font-weight: 600; white-space: nowrap; text-align: right; }
[data-iniciar-roteiro-etapa][data-estado="feito"] > span > :first-child { color: var(--ink2); }
[data-iniciar-roteiro-etapa][data-estado="feito"] > b { color: var(--verde); }
[data-iniciar-roteiro-etapa][data-estado="producao"] > span > :first-child { color: var(--azul); font-weight: 700; }
[data-iniciar-roteiro-etapa][data-estado="producao"] > b { color: var(--verde); }
[data-iniciar-roteiro-etapa][data-estado="falta"] > b { color: var(--ink2); }
/* etapa EXTERNA (21/09): linha informativa, sem toque -- vai pelo menu EXPEDIÇÃO */
[data-iniciar-roteiro-etapa][data-estado="externo"] { align-items: center; min-height: 48px; color: var(--ink2); }
[data-iniciar-roteiro-etapa][data-estado="externo"]:active { background: transparent; }
[data-iniciar-roteiro-etapa]:active { background: var(--panel2); transform: none; }

/* ======================================================================================
   T2 -- IDENTIFICAÇÃO POR LETRA. A grade 3×3 fica no MESMO lugar todo dia (9 grupos fixos,
   nunca derivados do cadastro) para o dedo aprender o caminho. Grupo sem gente fica apagado
   e inerte em vez de sumir. Visual novo (mock A2): teclas de 76px para luva, letras
   espaçadas (26px, .12em); o grupo SELECIONADO é AZUL (§1.5: selecionado), não verde. */
[data-identificacao-grupos] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
[data-identificacao-grupos] > button {
  min-height: var(--alvo-min-px);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.12em;
  border-radius: var(--raio);
  padding: 6px;
}
/* O grupo aberto: hoje o DOM marca com `data-cor-cheia` (o único da tela); no contrato é
   `data-selecionado`/`aria-pressed`. Os três valem o mesmo azul. */
[data-identificacao-grupos] > button[data-cor-cheia],
[data-identificacao-grupos] > button[aria-pressed="true"],
[data-identificacao-grupos] > button[data-selecionado] {
  background: var(--azul);
  color: var(--texto-sobre-azul);
  min-height: var(--alvo-min-px);
  font-size: 26px;
}
[data-identificacao-grupo-vazio] {
  opacity: 0.35;
  pointer-events: none;
}
[data-identificacao-lista-titulo] {
  font-size: var(--tam-rodape);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink2);
  padding: 12px 16px 4px;
  border-bottom: 0;
}
/* Lista de nomes: um GRUPO de linhas de 76px (luva), inicial num círculo de 40px, nome em
   20px, chip "hoje" em verde, chevron. Alinhado à esquerda -- é uma lista para ler e
   procurar, não um alvo isolado. */
[data-identificacao-lista] {
  background: var(--panel);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
[data-identificacao-lista] > button {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-size: 20px;
  font-weight: 700;
  min-height: var(--alvo-min-px);
  background: transparent;
  border: 0;
  border-radius: 0;
  justify-content: flex-start;
  padding: 9px 16px;
}
[data-identificacao-lista] > button + button { border-top: 1px solid var(--line); }
[data-identificacao-lista] > button:not(:has([data-chevron], [data-cartao-chevron]))::after { content: '›'; margin-left: auto; color: var(--ink3); font-size: 22px; line-height: 1; font-weight: 400; }
[data-identificacao-lista] > button:active { background: var(--panel2); transform: none; }
[data-identificacao-nome] { flex: 1; min-width: 0; }
[data-identificacao-avatar] {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background: var(--panel2);
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}
[data-identificacao-chip-hoje] {
  margin-left: 0;
  background: var(--verde-claro);
  color: var(--verde);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
[data-identificacao-dica] {
  font-size: var(--tam-sub);
  color: var(--ink2);
}
/* Saída secundária, no rodapé (RF-46/RF-79). Nunca atrás de rolagem ou de "mais opções". */
[data-identificacao-abrir-digitacao] {
  font-size: var(--tam-corpo);
  font-weight: 500;
  color: var(--azul);
}

/* Contrato §3 / §1.6: CONFIRMAÇÃO DO NOME (mock A3) -- "Você tem certeza que é" + o nome
   grande (34-36px, VERMELHO com borda vermelha: é a pergunta que evita apontar no nome de
   outro) + SIM verde grande + NÃO vermelho. */
[data-identificacao-confirmar] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espaco);
}
[data-identificacao-confirmar-nome] {
  background: var(--panel);
  border: 2px solid var(--vermelho);
  border-radius: var(--raio);
  padding: 30px 16px;
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--vermelho);
  overflow-wrap: anywhere;
}
[data-identificacao-confirmar-sim] {
  background: var(--verde);
  color: var(--texto-sobre-verde);
  border: 0;
  font-size: 20px;
  font-weight: 700;
  min-height: max(var(--alvo-min-px), 92px);
}
[data-identificacao-confirmar-nao] {
  background: var(--vermelho);
  color: #fff;
  border: 0;
  font-weight: 700;
}

/* T9 -- aviso do auto-retorno, logo abaixo do "⌂ VOLTAR AO INÍCIO". Discreto de propósito. */
[data-comprovante-auto-retorno] {
  font-size: var(--tam-sub);
  font-weight: 400;
  color: var(--ink2);
  text-align: center;
  padding-top: 6px;
}

[data-finalizar-hora-preview] {
  font-size: var(--tam-sub);
  font-weight: 600;
  color: var(--azul);
  padding: 10px 14px;
  background: var(--azul-claro);
  border-radius: var(--raio);
  min-height: 0;
}

/* ======================================================================================
   6. COMPONENTES REUTILIZÁVEIS -- teclado numérico, leitor QR, corrigir horário, barra de
   desfazer: só espaçamento interno, nunca fundo/sombra própria.
   ====================================================================================== */
[data-teclado-numerico],
[data-leitor-qr],
[data-corrigir-horario] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

[data-leitor-qr-camera] {
  min-height: 160px;
  background: #0A1524;
  border-radius: var(--raio);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Barra de desfazer: amarelo = "ainda dá para voltar" (pendente por 60s). */
[data-barra-desfazer] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--amarelo-claro);
  border: 0;
  border-radius: var(--raio);
}
[data-barra-desfazer-rotulo] {
  font-size: var(--tam-sub);
  color: var(--amarelo);
  font-weight: 600;
}
[data-barra-desfazer-botao] {
  width: auto;
  min-height: 0;
  padding: 10px 14px;
  background: var(--panel2);
  color: var(--amarelo);
  border: 0;
  font-weight: 700;
}

/* Crachá visual de estado (rodando/parado/crítico, PRD §4.2) -- fundo tingido em vez de só
   texto colorido (base.css cuida da cor). Escopado com `:not([data-indicador-rede])` de
   propósito: o indicador de rede já tem sua própria pílula compacta abaixo, e as duas
   regras têm a MESMA especificidade (um atributo cada) -- sem a exclusão, a ordem no
   arquivo é que decidiria e um dos dois layouts vazaria no outro sem avisar.
   As linhas do painel da ordem e do roteiro (contrato §3) também carregam `data-estado`,
   com outros valores: elas DESFAZEM este layout mais abaixo, com `[data-painel-ordem-linha]
   [data-estado]` (mesma especificidade, declarado depois -- ganha). */
[data-estado]:not([data-indicador-rede]) {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--raio);
  background: var(--panel);
  font-size: var(--tam-corpo);
}
[data-estado="rodando"]:not([data-indicador-rede]) { background: var(--verde-claro); border: 0; }
[data-estado="parado"]:not([data-indicador-rede]) { background: var(--vermelho-claro); border: 0; }
[data-estado="critico"]:not([data-indicador-rede]) { background: var(--vermelho-claro); border: 0; }

/* Indicador de rede -- sempre visível no topo de qualquer tela (RF-21, PRD §8.9). Pílula
   compacta; o botão de sincronizar é auxiliar, mede o próprio conteúdo em largura -- a
   ALTURA continua herdando o piso de 76px de base.css. */
[data-indicador-rede] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  padding: 4px 10px;
  font-size: var(--tam-rodape);
  border-radius: 999px;
  max-width: 480px;
  margin: 0 auto;
}
[data-indicador-rede][data-estado="online"] { color: var(--verde); }
[data-indicador-rede][data-estado="offline"] { color: var(--vermelho); }
[data-indicador-rede][data-estado="pendente"] { color: var(--amarelo); }
[data-indicador-rede][data-estado="preso"] { color: #fff; background: var(--vermelho); font-weight: 700; }
/* T8: linha de status do envio no comprovante -- verde enviado, amarelo pendente, vermelho
   recusado (§1.5). */
[data-comprovante-envio] { margin: 4px 0 2px; padding: 10px 14px; border-radius: var(--raio); font-weight: 600; font-size: var(--tam-sub); background: var(--panel); border: 0; }
[data-comprovante-envio="enviado"] { color: var(--verde); background: var(--verde-claro); }
[data-comprovante-envio="pendente"] { color: var(--amarelo); background: var(--amarelo-claro); }
[data-comprovante-envio="recusado"], [data-comprovante-envio="travado"] { color: #fff; background: var(--vermelho); }
/* 09/09: setup/inspecao em aberto dentro de "Minha ordem" */
[data-finalizar-outras] { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
[data-finalizar-outras-titulo] { font-size: var(--tam-rodape); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink2); padding: 4px 16px 0; }
[data-finalizar-outra] { width: 100%; text-align: left; font-weight: 700; }
/* T10: identidade do aparelho no repouso */
[data-repouso-identidade] { font-size: var(--tam-rodape); color: var(--ink3); text-align: left; margin-top: -4px; padding: 0 4px; }
/* T14: diagnostico de rede em "ultimas acoes" */
[data-ua-diag] { font-size: var(--tam-rodape); line-height: 1.35; padding: 10px 14px; border-radius: var(--raio); background: var(--panel); color: var(--ink2); }
[data-ua-motivo-recusa] { flex-basis: 100%; grid-column: 1 / -1; font-size: var(--tam-rodape); color: var(--vermelho); font-weight: 600; }
/* T6/T11/T12: telas de aviso antes de gravar */
[data-aviso-gravar] { display: flex; flex-direction: column; gap: 8px; }
[data-aviso-gravar-texto] { font-size: var(--tam-corpo); line-height: 1.4; padding: 12px 16px; border-radius: var(--raio); background: var(--panel); }
[data-indicador-rede-rotulo] {
  font-weight: 600;
}
[data-indicador-rede-sincronizar] {
  width: auto;
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: var(--tam-rodape);
  background: transparent;
  color: var(--azul);
  font-weight: 500;
}

/* Contador de timeout -- só visível nos últimos 10s (PRD §4.3); a classe é alternada por
   `timeout.js`, nunca por CSS puro (a regra depende do tempo, não é estática). */
[data-timeout-contador] {
  display: none;
}
[data-timeout-contador][data-visivel="true"] {
  display: inline-block;
}

/* ======================================================================================
   T6/T7 -- SETUP EM DUAS TELAS. (1) número da ordem OU teste de ferramenta, depois o tipo;
   (2) em qual máquina -- e o toque na máquina já inicia o setup. Setup = azul (§1.5). */
[data-setup-separador] {
  position: relative;
  text-align: center;
  font-size: var(--tam-rodape);
  color: var(--ink2);
  padding: 6px 0;
}
/* Linha-texto-linha: deixa claro que são dois CAMINHOS alternativos, não um passo seguinte. */
[data-setup-separador]::before,
[data-setup-separador]::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 1.2rem);
  height: 1px;
  background: var(--line);
}
[data-setup-separador]::before { left: 0; }
[data-setup-separador]::after  { right: 0; }

[data-setup-legenda] {
  display: block;
  margin-top: 2px;
  font-size: var(--tam-rodape);
  font-weight: 500;
  color: var(--ink2);
  text-transform: none;
  letter-spacing: 0;
}
[data-setup-contexto] {
  font-size: var(--tam-sub);
  font-weight: 400;
  color: var(--ink2);
  padding: 0 4px;
}
[data-setup-secao] {
  font-size: var(--tam-rodape);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink2);
  padding: 12px 16px 4px;
  border-bottom: 0;
}
[data-setup-tipo-card] {
  background: var(--panel);
  border: 0;
  border-radius: var(--raio);
  padding: 8px;
}
[data-setup-tipo-card] + [data-setup-tipo-card] {
  margin-top: 8px;
}
[data-setup-tipo-cabecalho] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding: 4px 8px 0;
  font-size: var(--tam-rodape);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--azul);
}
[data-setup-tipo-contador] {
  background: var(--azul-claro);
  color: var(--azul);
  font-size: 12px;
  min-width: 1.4rem;
  text-align: center;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0;
}
/* Mesma leitura da T5: número grande, código miúdo. */
[data-setup-tipo-maquinas] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
/* As quatro máquinas únicas (Fresadeira, Guilhotina, Tamboreadeira, Laminadora) num card
   só, em 2 colunas e com o NOME em vez do número -- elas não têm número. */
[data-setup-tipo-maquinas-nome] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
[data-setup-tipo-maquinas] > button,
[data-setup-tipo-maquinas-nome] > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.1;
  border-radius: var(--raio);
}
[data-setup-tipo-maquinas] [data-setup-maquina-numero] {
  font-size: 24px;
  font-weight: 600;
}
[data-setup-tipo-maquinas-nome] [data-setup-maquina-numero] {
  font-size: var(--tam-sub);
  font-weight: 600;
}
[data-setup-maquina-codigo] {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink2);
}
[data-setup-aviso] {
  background: var(--azul-claro);
  border: 0;
  border-radius: var(--raio);
  color: var(--azul);
  font-size: var(--tam-sub);
  font-weight: 600;
  text-align: center;
  padding: 10px 14px;
}
/* "← Voltar" só NAVEGA -- nunca dispara requisição nem desfaz o que já foi gravado. */
[data-setup-voltar] {
  font-size: var(--tam-corpo);
  font-weight: 500;
  color: var(--azul);
}

/* ======================================================================================
   F1/F2 (patch de finalização, 2026-08-13) -- CARDS DE CHAVE-VALOR.
   Rótulo à esquerda, valor em peso forte à direita, separador de 1px: é a mesma linha de
   grupo do contrato §3, aplicada aos atributos antigos de finalizar.js. */
[data-finalizar-inicio],
[data-finalizar-conferencia] {
  background: var(--panel);
  border: 0;
  border-radius: var(--raio);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
[data-finalizar-kv] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: var(--tam-corpo);
  min-height: 48px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
}
[data-finalizar-kv]:last-child {
  border-bottom: 0;
}
[data-finalizar-kv-valor] {
  font-weight: 600;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
/* "Boas" em verde dentro da conferência -- é a linha que o operador procura primeiro. */
[data-finalizar-conferencia-boas] {
  color: var(--verde);
}
[data-finalizar-conferencia-total] {
  background: var(--panel2);
  font-weight: 600;
}
[data-finalizar-conferencia-total] [data-finalizar-kv-valor] { font-size: var(--tam-numero); font-weight: 700; }
/* O "Corrigir" mora DENTRO da linha de início: é uma ação secundária sobre aquele valor. */
[data-finalizar-inicio-corrigir] {
  width: auto;
  min-height: 0;
  padding: 4px 10px;
  font-size: var(--tam-rodape);
  font-weight: 600;
  color: var(--azul);
  background: transparent;
  border: 0;
  text-decoration: none;
}
[data-finalizar-fora-dica] {
  font-size: var(--tam-rodape);
  color: var(--ink2);
  padding: 4px 16px;
}

/* ======================================================================================
   ATIVAÇÃO DO APARELHO (2026-08-13) -- tela de GESTOR, uma vez na vida do terminal.
   Faixa azul (não é fluxo de chão) e o `device_id` em destaque. */
[data-fluxo="ativacao"] { border-top-color: var(--azul); }

[data-ativacao-titulo] {
  font-size: var(--tam-titulo);
  font-weight: 700;
  letter-spacing: -.02em;
}
[data-ativacao-explicacao],
[data-ativacao-ajuda] {
  font-size: var(--tam-sub);
  color: var(--ink2);
}
[data-ativacao-device-id] {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--tam-corpo);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
  background: var(--azul-claro);
  border: 0;
  border-radius: var(--raio);
  color: var(--azul);
  padding: 12px 8px;
  user-select: all;
  word-break: break-all;
}
[data-ativacao-rotulo] {
  font-size: var(--tam-rodape);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink2);
}
[data-ativacao-previa-posto] {
  font-size: var(--tam-numero);
  font-weight: 700;
  color: var(--azul);
  text-align: center;
  min-height: 1.6rem;
}
[data-ativacao-voltar] {
  font-size: var(--tam-corpo);
  font-weight: 500;
  color: var(--azul);
}

/* ======================================================================================
   TELA "FINALIZAR ORDEM" -- HIERARQUIA DA LISTA (achado do dono, 2026-08-13).
   "✅ Finalizar esta" é A ação da tela, mas era visualmente idêntico a "Minha ordem não está
   na lista", que é a saída rara.

   PROIB usar `[data-cor-cheia]` aqui: RF-17 permite UMA cor cheia por tela renderizada, e a
   lista tem N cartões -- N preenchidos violariam a regra. O destaque vem por verde-claro
   (o mesmo MINHA ORDEM do repouso), que hierarquiza sem competir. */
[data-finalizar-cartao-finalizar] {
  background: var(--verde-claro);
  border: 1.5px solid rgba(52, 199, 89, .5);
  color: var(--verde);
  font-size: var(--tam-corpo);
  font-weight: 700;
  min-height: var(--alvo-min-px);
  justify-content: center;
  text-align: center;
}
[data-finalizar-cartao-finalizar]:active {
  background: rgba(52, 199, 89, .35);
}
/* A saída rara recua para segundo plano -- continua sempre visível (princípio 5). */
[data-finalizar-nao-esta-na-lista] {
  background: transparent;
  border: 0;
  color: var(--azul);
  font-size: var(--tam-corpo);
  font-weight: 500;
  min-height: var(--alvo-min-px);
}

/* ======================================================================================
   NOVE MUDANCAS DO DONO (01/09) -- ver MELHORIAS-APP.md. Regras SO por data-* que as telas
   ja emitem. Todo alvo continua com o piso de 76px de base.css; "discreto" aqui e cor/fundo/
   tamanho de fonte, nunca altura.
   ====================================================================================== */

/* 2/5 -- repouso: "ultimas acoes" como linha discreta no rodape, e nao um botao a mais */
[data-repouso-ultimas-acoes],
[data-iniciar-suporte-link] {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--azul);
  font-size: var(--tam-corpo);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 4px;
}
[data-repouso-ultimas-acoes]:active,
[data-iniciar-suporte-link]:active { color: var(--ink); }

/* 4 -- lista de atividades de suporte */
[data-iniciar-atividades] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-iniciar-atividade] { justify-content: flex-start; text-align: left; }
[data-iniciar-atividades-voltar],
[data-trocar-op-voltar],
[data-ua-voltar] { background: transparent; border: 0; box-shadow: none; color: var(--azul); font-weight: 500; }
[data-iniciar-atividades-sem-processo] { padding: 12px 16px; border-radius: var(--raio); background: var(--panel); }

/* 6 -- OP fora da programacao: o aviso grita, o seguir sussurra */
[data-iniciar-alerta-forte] {
  background: var(--vermelho);
  color: #fff !important;
  font-weight: 700;
  font-size: var(--tam-corpo);
  line-height: 1.3;
  padding: 12px 16px;
  border-radius: var(--raio);
}
[data-iniciar-nao-encontrada] [data-iniciar-continuar][data-iniciar-seguir-pequeno] {
  background: var(--verde-claro);
  color: var(--verde);
  border: 1.5px solid rgba(52, 199, 89, .5);
  font-size: var(--tam-corpo);
  font-weight: 700;
  min-height: var(--alvo-min-px);
  opacity: 1;
}

/* 7 -- ficha da OP no topo da escolha de processo: um grupo de linhas */
[data-iniciar-ficha] {
  background: var(--panel);
  border: 0;
  border-radius: var(--raio);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
[data-iniciar-ficha-linha] { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--tam-corpo); min-height: 48px; padding: 9px 16px; }
[data-iniciar-ficha-linha] + [data-iniciar-ficha-linha] { border-top: 1px solid var(--line); }
[data-iniciar-ficha-linha] > span:first-child { color: var(--ink); font-weight: 400; text-transform: none; font-size: var(--tam-corpo); letter-spacing: 0; flex: 1 1 auto; padding-top: 0; }
[data-iniciar-ficha-linha] > span:last-child { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
[data-iniciar-ficha-atrasada] { color: var(--vermelho); }
[data-iniciar-ficha-rodando] { color: var(--verde); }

/* 8 -- card da ordem na pergunta de quantidade */
[data-finalizar-card-ordem] {
  background: var(--panel);
  border: 0;
  border-radius: var(--raio);
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-finalizar-card-ordem-titulo] { font-weight: 600; font-size: var(--tam-corpo); }
[data-finalizar-card-ordem-detalhe] { color: var(--ink2); font-size: var(--tam-rodape); }
[data-finalizar-card-ordem-dica] { color: var(--amarelo); font-weight: 600; font-size: var(--tam-rodape); }

/* 3 -- trocar a OP */
[data-contexto-trocar-op] { background: var(--panel2); color: var(--ink); font-weight: 700; }
[data-trocar-op-titulo] { font-size: var(--tam-titulo); font-weight: 700; letter-spacing: -0.02em; }
[data-trocar-op-subtitulo] { color: var(--ink2); font-size: var(--tam-sub); }
[data-trocar-op-atual], [data-trocar-op-nova] {
  background: var(--panel); border: 0; border-radius: var(--raio);
  padding: 12px 16px; font-weight: 600;
}
[data-trocar-op-nova] { background: var(--verde-claro); color: var(--verde); }
[data-trocar-op-pergunta] { color: var(--ink2); font-size: var(--tam-rodape); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; padding: 12px 16px 4px; }
[data-trocar-op-aviso] { color: var(--amarelo); font-weight: 600; }
[data-trocar-op-alerta] { padding: 12px 16px; border-radius: var(--raio); background: var(--panel); }
[data-trocar-op-busca], [data-trocar-op-confirmar], [data-trocar-op-resultados] { display: flex; flex-direction: column; gap: var(--espaco); }

/* 1 -- pausa sem "vou embora": a dica de fim do dia */
[data-pausa-dica-fim-do-dia] { color: var(--ink2); text-align: center; font-weight: 400; font-size: var(--tam-sub); padding: 8px 0 0; }

/* 5 -- ultimas acoes (mock A10): segmento "todos / só pendentes", linhas em grupo, estado
   com bolinha: enviado verde, pendente amarelo, recusado vermelho. */
[data-ua-corpo] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-ua-titulo] { font-size: var(--tam-titulo); font-weight: 700; letter-spacing: -0.02em; padding: 6px 4px 0; }
[data-ua-subtitulo] { color: var(--ink2); font-size: var(--tam-sub); padding: 0 4px; }
[data-ua-aviso-pendentes] { padding: 10px 14px; border-radius: var(--raio); background: var(--amarelo-claro); color: var(--amarelo); border: 0; font-weight: 600; }
[data-ua-abas], [data-ua-filtros] { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; background: var(--panel); border-radius: 10px; padding: 3px; }
[data-ua-aba], [data-ua-janela], [data-ua-so-pendentes] { font-size: var(--tam-sub); font-weight: 500; background: transparent; color: var(--ink2); border-radius: 8px; }
[data-ua-aba-ativa], [data-ua-filtro-ativo] { background: var(--panel2); color: var(--ink); font-weight: 600; border: 0; }
[data-ua-lista], [data-ua-lista-fabrica] { display: flex; flex-direction: column; gap: 0; background: var(--panel); border-radius: var(--raio); overflow: hidden; }
[data-ua-linha] {
  display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center;
  background: transparent; border: 0; border-radius: 0;
  padding: 9px 16px; font-size: var(--tam-corpo); min-height: 48px;
}
[data-ua-linha] + [data-ua-linha] { border-top: 1px solid var(--line); }
[data-ua-hora] { color: var(--ink2); font-variant-numeric: tabular-nums; font-size: var(--tam-rodape); white-space: nowrap; }
[data-ua-texto] { font-weight: 400; min-width: 0; }
[data-ua-selo] { font-size: var(--tam-rodape); font-weight: 600; letter-spacing: 0; text-transform: none; padding: 0; border-radius: 0; white-space: nowrap; background: transparent; }
/* 17/09: a bolinha vem do <i data-ponto> no DOM; o ::before foi removido (duplicava). */
[data-ua-selo="ok"], [data-ua-selo="enviado"] { background: transparent; color: var(--verde); }
[data-ua-selo="pend"], [data-ua-selo="pendente"] { background: transparent; color: var(--amarelo); }
[data-ua-selo="morta"], [data-ua-selo="recusado"] { background: transparent; color: var(--vermelho); }
/* Contrato §3: `[data-ua-status="enviado|pendente|recusado"]` (e os valores de hoje ok/pend/
   morta): a linha inteira não muda de fundo -- só o selo carrega a cor. */
[data-ua-linha][data-ua-status="pend"], [data-ua-linha][data-ua-status="pendente"] { border-color: var(--line); }
[data-ua-linha][data-ua-status="morta"], [data-ua-linha][data-ua-status="recusado"] { border-color: var(--line); }
[data-ua-status="enviado"] > [data-ua-selo], [data-ua-status="ok"] > [data-ua-selo] { color: var(--verde); }
[data-ua-status="pendente"] > [data-ua-selo], [data-ua-status="pend"] > [data-ua-selo] { color: var(--amarelo); }
[data-ua-status="recusado"] > [data-ua-selo], [data-ua-status="morta"] > [data-ua-selo] { color: var(--vermelho); }
[data-ua-nome] { font-weight: 400; color: var(--ink2); font-size: var(--tam-rodape); }
[data-ua-vazio], [data-ua-nota-fabrica] { color: var(--ink2); font-size: var(--tam-sub); padding: 12px 16px; }

/* 5b -- ultimas acoes: motivo da fila parada e reativar (dono, 01/09) */
[data-ua-fila-parada] { padding: 12px 16px; border-radius: var(--raio); background: var(--vermelho-claro); color: var(--vermelho); border: 0; line-height: 1.35; font-weight: 600; }
[data-ua-reativar] { font-size: var(--tam-corpo); }
[data-ua-reativar]:not([data-contorno]) { background: transparent; border: 1px solid var(--line); color: var(--ink2); font-weight: 600; }
[data-ua-enviar] { background: var(--panel2); }

/* ======================================================================================
   MATERIA-PRIMA (dono, 15/09) -- fichas fixas (componentes/fichas.js) e a tela material.js.
   Faixa de identidade neutra como as demais (§1.5). Fichas A-E no visual novo: A = grupo com
   os números grandes (mock `.numeros`); B = faixa; C = pergunta; D = confira (grupo de
   linhas + par de botões); E = linha tocável com chevron.
   ====================================================================================== */
[data-fluxo="material"] { border-top-color: var(--panel2); }

/* A -- tres numeros grandes (mock D4/A9: 40px em 2 colunas, 32px em 3) */
[data-ficha-a] { background: var(--panel); border: 0; border-radius: var(--raio); overflow: hidden; }
[data-ficha-a-cabecalho] { display: flex; justify-content: space-between; gap: 8px; padding: 10px 16px 0; font-size: var(--tam-rodape); text-transform: uppercase; letter-spacing: .04em; font-weight: 400; color: var(--ink2); background: transparent; }
[data-ficha-a-numeros] { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 8px 6px; }
[data-ficha-a-numeros="2"] { grid-template-columns: repeat(2, 1fr); }
[data-ficha-a-numeros="1"] { grid-template-columns: 1fr; }
[data-ficha-a-numeros] > div { padding: 0 4px; text-align: center; border-right: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
[data-ficha-a-numeros] > div + div { border-left: 1px solid var(--line); }
[data-ficha-a-numeros] > div:last-child { border-right: 0; }
[data-ficha-a-valor] { font-size: var(--tam-numero-3); font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
[data-ficha-a-numeros="2"] [data-ficha-a-valor] { font-size: var(--tam-numero-2); }
[data-ficha-a-rotulo] { font-size: var(--tam-rodape); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink2); }
[data-ficha-cinza] { font-size: var(--tam-rodape); color: var(--ink2); line-height: 1.35; white-space: pre-line; padding: 4px 16px 12px; text-align: center; }
[data-ficha-pergunta] [data-ficha-cinza] { text-align: left; padding: 0 4px; }

/* B -- faixa: cor NUNCA sozinha, a palavra vai junto. Verde OK, amarelo OLHE, vermelho
   FALTA. (A 4ª palavra ATENÇÃO só entra se alguma frente pedir.) */
[data-faixa] { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: var(--tam-sub); }
[data-faixa-palavra] { font-size: var(--tam-rodape); letter-spacing: .06em; font-weight: 700; white-space: nowrap; }
[data-faixa-texto] { flex: 1; }
[data-faixa-numero] { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--tam-corpo); }
[data-faixa="OK"] { background: var(--verde-claro); color: var(--verde); border: 0; }
[data-faixa="OLHE"] { background: var(--amarelo-claro); color: var(--amarelo); border: 0; }
[data-faixa="FALTA"] { background: var(--vermelho-claro); color: var(--vermelho); border: 0; }

/* C -- pergunta */
[data-ficha-pergunta] > h2 { margin: 0 0 2px; }

/* D -- confira: grupo de linhas; a situação pinta só o VALOR da linha de destaque */
[data-confira] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-confira-linhas] { background: var(--panel); border: 0; border-left-width: 0; border-radius: var(--raio); overflow: hidden; }
[data-confira="OK"] [data-confira-linhas] { border-left-color: transparent; }
[data-confira="OLHE"] [data-confira-linhas] { border-left-color: transparent; }
[data-confira="FALTA"] [data-confira-linhas] { border-left-color: transparent; }
[data-confira-linha] { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: var(--tam-corpo); }
[data-confira-linha]:last-child { border-bottom: 0; }
[data-confira-linha="destaque"] { background: var(--panel2); font-weight: 600; }
[data-confira-linha] b { font-variant-numeric: tabular-nums; font-size: var(--tam-corpo); font-weight: 600; }
[data-confira-linha="destaque"] b { font-size: var(--tam-numero); font-weight: 700; }
[data-confira="OK"] [data-confira-linha="destaque"] b { color: var(--verde); }
[data-confira="OLHE"] [data-confira-linha="destaque"] b { color: var(--amarelo); }
[data-confira="FALTA"] [data-confira-linha="destaque"] b { color: var(--vermelho); }
[data-confira-botoes="par"] { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
[data-confira-botoes] button { min-height: var(--alvo-min-px); }
[data-confira-botoes] [data-cor-cheia] { min-height: max(var(--alvo-min-px), 84px); }
[data-confira-botoes] [data-contorno] { background: var(--panel2); color: var(--ink); border: 0; }

/* E -- cartao tocavel (76px, chevron); "fraco" = escape, tracejado */
[data-cartao] { display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--alvo-min-px); padding: 9px 16px; text-align: left; background: var(--panel); border: 0; border-radius: var(--raio); color: var(--ink); justify-content: flex-start; font-weight: 400; }
[data-cartao="fraco"] { border: 1.5px dashed var(--line); background: transparent; color: var(--ink2); }
[data-cartao-icone] { font-size: 20px; flex: 0 0 30px; text-align: center; }
[data-cartao-corpo] { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-cartao-corpo] b { font-size: var(--tam-corpo); font-weight: 600; }
[data-cartao-corpo] small { font-size: var(--tam-rodape); color: var(--ink2); font-variant-numeric: tabular-nums; }
[data-cartao-chevron] { font-size: 22px; color: var(--ink3); line-height: 1; }
/* Cartões seguidos (menu do material, D1) ficam separados pelo gap do contêiner (8px) --
   sem margem negativa nem cantos retos: o mock os desenha num grupo só, mas o agrupamento
   por CSS dependeria do gap de cada contêiner e quebraria onde ele for diferente. Quem
   quiser o grupo do mock põe os cartões dentro de `[data-grupo]` (a regra de grupo tira o
   raio e põe o separador). */
[data-grupo] > [data-cartao] { border-radius: 0; }
[data-grupo] > [data-cartao] + [data-cartao] { border-top: 1px solid var(--line); }

/* expedicao.js (21/09) -- mesmo desenho do material; checklist SIM/NAO com cor de significado */
[data-fluxo="expedicao"] { border-top-color: var(--panel2); }
[data-expedicao-palco] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-expedicao-sub] { color: var(--ink2); font-size: var(--tam-sub); margin: -4px 0 2px; padding: 0 4px; }
[data-expedicao-voltar] { background: transparent; border: 0; color: var(--azul); font-weight: 500; min-height: var(--alvo-min-px); }
[data-expedicao-cartao-valor] { font-size: var(--tam-corpo); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-expedicao-item] { min-height: 64px; }
/* especificidade acima de `[data-grupo-linha] > span` (que empilha rotulo + subtitulo em coluna) */
[data-grupo-linha] > [data-expedicao-sn], [data-expedicao-sn] { display: flex; flex-direction: row; gap: 6px; flex: 0 0 auto; align-items: center; }
/* os dois botoes lado a lado: o `width: 100%` generico dos botoes de tela nao vale aqui */
[data-expedicao-sn] > button { width: auto; flex: 0 0 auto; min-width: 72px; min-height: 52px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: var(--panel2); color: var(--ink3); font-weight: 700; font-size: var(--tam-sub); }
[data-expedicao-sn] > button[data-marcado="SIM"] { background: var(--verde); color: var(--texto-sobre-verde, #06301a); }
[data-expedicao-sn] > button[data-marcado="NAO"] { background: var(--vermelho); color: #fff; }
/* BALDE (03/10): o ✕ de tirar uma linha da divisão da sobra -- pequeno, ao lado do número. */
[data-expedicao-sobrou-linha] { display: flex; flex-direction: row; align-items: center; gap: 10px; }
[data-expedicao-sobrou-linha] > span { flex: 1; min-width: 0; }
[data-expedicao-sobrou-linha] > button[data-expedicao-sobrou-tirar] { width: auto; flex: 0 0 auto; min-width: 52px; min-height: 48px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: var(--panel2); color: var(--ink2); font-weight: 700; font-size: var(--tam-sub); }
[data-expedicao-checklist-ok]:disabled { opacity: .4; }
[data-expedicao-aviso-qtd]:empty, [data-expedicao-checklist-aviso]:empty { display: none; }
[data-expedicao-parceiro] [data-cartao][data-selecionado] { outline: 2px solid var(--azul); }
[data-expedicao-saida] b { font-variant-numeric: tabular-nums; }
/* rodada 2 (22/09): chips de data (multi-selecao), cabecalho do item, transferir, entrega */
[data-expedicao-chips] { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; }
[data-expedicao-chip] { width: auto; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--panel); color: var(--ink2); font-weight: 600; font-size: var(--tam-sub); margin: 0; }
[data-expedicao-chip][data-selecionado] { background: var(--azul); color: var(--texto-sobre-azul); }
[data-expedicao-item-cabecalho] b { font-size: var(--tam-numero); }
[data-expedicao-transferir] { width: 100%; min-height: 52px; margin: 0; border: 1.5px dashed var(--azul); background: transparent; color: var(--azul); font-weight: 600; border-radius: 0 0 var(--raio) var(--raio); }
[data-entrega-contar] { width: 100%; text-align: left; background: transparent; border: 0; color: var(--ink); font: inherit; min-height: 64px; }
[data-entrega-contar] b { font-size: var(--tam-numero); font-variant-numeric: tabular-nums; }
[data-entrega-contar] + [data-entrega-contar], [data-entrega-contar] + [data-expedicao-item] { border-top: 1px solid var(--line); }
/* ENTRADA DA EXPEDIÇÃO (dono, 15/10): botões menores em grade no topo; lista dos expedidos por data de entrega */
[data-expedicao-acoes] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { [data-expedicao-acoes] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
[data-expedicao-acoes] > [data-cartao] { min-height: 64px; padding: 8px 10px; gap: 8px; }
[data-expedicao-acoes] [data-cartao-icone] { font-size: 18px; flex: 0 0 22px; }
[data-expedicao-acoes] [data-cartao-corpo] b { font-size: var(--tam-sub); }
[data-expedicao-acoes] [data-cartao-chevron] { display: none; }
[data-expedicao-dia] { font-size: var(--tam-rodape); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); padding: 6px 4px 0; }
[data-expedicao-dia][data-hoje] { color: var(--ink); }
[data-expedicao-dia][data-atrasada] { color: var(--vermelho); }
[data-expedicao-dia-lista][data-atrasada] { outline: 2px solid var(--vermelho); outline-offset: -2px; border-radius: var(--raio); }
[data-expedicao-situacao] { display: inline-block; align-self: flex-start; margin-top: 2px; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
small[data-expedicao-situacao="DOCA"] { color: var(--amarelo); background: color-mix(in srgb, var(--amarelo) 16%, transparent); }
small[data-expedicao-situacao="ROTA"] { color: var(--azul); background: color-mix(in srgb, var(--azul) 16%, transparent); }
[data-expedicao-entregues] [data-expedicao-cartao-valor] { color: var(--verde); }
[data-expedicao-entregues-lista][hidden] { display: none; }
[data-expedicao-entregue] small { color: var(--ink2); }
[data-expedicao-sub][data-atrasada] { color: var(--vermelho); font-weight: 600; }
[data-entrega-aviso]:empty { display: none; }
[data-entrega-fotos] { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
[data-entrega-foto-vazia] { grid-column: 1 / -1; min-height: 120px; border: 1.5px dashed var(--line); border-radius: var(--raio); display: grid; place-items: center; color: var(--ink2); text-align: center; padding: 12px; }
[data-entrega-foto-miniatura] { margin: 0; background: var(--panel); border-radius: var(--raio); overflow: hidden; }
[data-entrega-foto-miniatura] img { display: block; width: 100%; height: 120px; object-fit: cover; }
[data-entrega-foto-miniatura] figcaption { font-size: var(--tam-rodape); color: var(--ink2); padding: 4px 8px; }
[data-entrega-foto-miniatura="CANHOTO"] { outline: 2px solid var(--verde); }
[data-entrega-foto-botoes] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-entrega-foto-botoes] > button { margin: 0; min-height: var(--alvo-min-px); }
[data-entrega-carga], [data-entrega-conferir], [data-entrega-em-rota], [data-entrega-destino], [data-entrega-foto],
[data-entrega-motivo], [data-entrega-iniciar-tela], [data-entrega-finalizar-tela], [data-entrega-contar-tela] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-entrega-conferido]:disabled, [data-entrega-iniciar]:disabled, [data-entrega-confirmar]:disabled { opacity: .4; }

/* material.js */
[data-material-palco] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-material-sub] { color: var(--ink2); font-size: var(--tam-sub); margin: -4px 0 2px; padding: 0 4px; }
[data-material-voltar] { background: transparent; border: 0; color: var(--azul); font-weight: 500; min-height: var(--alvo-min-px); }
[data-material-lote-grande] { background: var(--panel2); border: 0; border-radius: var(--raio); text-align: center; font-size: var(--tam-numero-2); font-weight: 700; letter-spacing: .04em; padding: 12px; font-variant-numeric: tabular-nums; }
[data-material-inv-linha] [data-teclado-numerico] { margin-top: 4px; }
[data-material-editado] { color: var(--amarelo); font-weight: 600; }

/* iniciar.js / finalizar.js -- barras no torno */
[data-iniciar-painel-op], [data-iniciar-qual-barra], [data-iniciar-quantas-separou],
[data-finalizar-sobraram], [data-finalizar-ficha-d], [data-finalizar-corrigir-torno], [data-finalizar-extra],
[data-finalizar-ruins], [data-finalizar-barras-usadas], [data-confirmacao-fim], [data-iniciar-quantas-barras], [data-iniciar-chapas] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-finalizar-cartao-barras] { color: var(--ink2); font-weight: 400; font-size: var(--tam-rodape); }
[data-finalizar-corrigir-torno] [data-cartao] { min-height: var(--alvo-min-px); }

/* GRAVANDO (16/09) -- a tela muda no toque; a espera de rede acontece atras dela.
   `[data-gravando*]` (componentes/gravando.js, contrato §3) e `[data-finalizar-gravando*]`
   (o mesmo elemento em finalizar.js) levam a MESMA animação. */
[data-finalizar-gravando],
[data-gravando] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 46vh; text-align: center; padding: 16px; }
[data-finalizar-gravando-alvo],
[data-gravando-alvo] { font-size: 56px; line-height: 1; animation: mesPulsa 1.1s ease-in-out infinite; }
[data-finalizar-gravando-titulo],
[data-gravando-titulo] { font-size: var(--tam-titulo); font-weight: 700; letter-spacing: -.02em; }
[data-finalizar-gravando-sub],
[data-gravando-sub] { font-size: var(--tam-sub); color: var(--ink2); max-width: 28ch; line-height: 1.35; }
@keyframes mesPulsa { 0%, 100% { opacity: .45; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { [data-finalizar-gravando-alvo], [data-gravando-alvo] { animation: none; opacity: .8; } }

/* Histórico de saídas editável (16/09) -- "editado" em amarelo (§1.5) */
[data-material-corrigir-historico] { display: flex; flex-direction: column; gap: var(--espaco); }

/* INVENTARIO v2 (16/09, mock D3): materia -> fornecedores na mesma tela, numero do sistema a
   vista. Cada fornecedor é uma LINHA do grupo (toque abre o teclado ali); a linha em edição
   fica em `--panel2` com o valor azul; "editado" em amarelo; "informar" em cinza. */
[data-material-inv-tabela] { display: flex; flex-direction: column; gap: 0; background: var(--panel); border-radius: var(--raio); overflow: hidden; }
[data-material-inv-tabela] > * + * { border-top: 1px solid var(--line); }
[data-material-inv-numeros] { display: flex; align-items: baseline; gap: 10px; }
[data-material-inv-sistema] { font-family: inherit; font-size: var(--tam-rodape); color: var(--ink2); }
[data-material-inv-contado-valor] { font-size: var(--tam-corpo); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; }
[data-material-inv-contado-valor=""] { font-size: var(--tam-corpo); font-weight: 400; color: var(--ink3); }
[data-material-inv-editado] { flex-basis: 100%; color: var(--amarelo); font-weight: 600; font-size: var(--tam-rodape); }
[data-material-inv-bateu] { flex-basis: 100%; color: var(--verde); font-weight: 600; font-size: var(--tam-rodape); }
[data-material-inv-teclado] { padding: 10px 12px 12px; }
[data-material-inv-ok] { margin-top: 4px; }
[data-material-inv-ok][disabled] { opacity: .45; }
/* Fornecedor contado: sem borda verde -- o número contado é o sinal (§1.5). */
[data-material-inv-contado] { border-color: transparent; }
[data-material-inv-contado] [data-material-inv-contado-valor] { color: var(--ink); }
/* ======================================================================================
   MATÉRIA-PRIMA, redesenho 07/10/2026 -- inventário por LOTE e estoque grande.
   1o nível: dois cartões grandes (USINAGEM / ESTAMPARIA). Usinagem: grupos que abrem ao tocar.
   Contagem: uma linha por lote com a pílula "CONTAR" à vista (antes, "informar" apagado). */
[data-material-inv-areas] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-material-inv-areas] > [data-cartao] { min-height: 112px; padding: 16px 20px; }
[data-material-inv-areas] [data-cartao-icone] { font-size: 34px; flex-basis: 48px; }
[data-material-inv-areas] [data-cartao-corpo] b { font-size: var(--tam-titulo); font-weight: 700; letter-spacing: .02em; }
[data-material-inv-areas] [data-cartao-corpo] small { font-size: var(--tam-sub); }
[data-material-inv-grupo] [data-cartao-corpo] b { font-size: var(--tam-numero); font-weight: 700; }
[data-material-inv-grupo][aria-expanded="true"] { background: var(--panel2); }
[data-material-inv-grupo-itens] { display: flex; flex-direction: column; gap: 6px; margin: -4px 0 4px 14px; padding-left: 10px; border-left: 3px solid var(--azul); }
[data-material-inv-lote-nome] { font-weight: 600; }
[data-grupo-linha] > b[data-material-inv-contar] {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 2px solid var(--azul);
  border-radius: 999px;
  color: var(--azul);
  font-size: var(--tam-sub);
  font-weight: 700;
  letter-spacing: .05em;
}
[data-grupo-linha] > b[data-material-inv-contado-valor] { font-size: var(--tam-numero); font-weight: 700; }
[data-material-inv-novo-lote] { color: var(--azul); }
[data-material-inv-pilhas] { text-align: center; font-size: var(--tam-numero-3); font-weight: 700; color: var(--azul); font-variant-numeric: tabular-nums; padding: 4px 0; }
[data-material-inv-pilhas][hidden],
[data-material-inv-pronto][hidden] { display: none; }
[data-material-inv-somar], [data-material-inv-pronto] { width: 100%; font-weight: 700; }
[data-material-inv-somar][disabled] { opacity: .45; }
[data-material-inv-nao-contados] { line-height: 1.5; }
/* 08/10 (dono): EDITAR antes de gravar -- pílula "✎ EDITAR" na linha contada e no Confira; a tela
   "Editar lote" com uma linha por campo (fornecedor, quantidade, NF). NF diferente: aviso amarelo. */
[data-grupo-linha] > b[data-material-inv-editar],
button[data-material-inv-confira-editar] {
  flex: 0 0 auto;
  margin-left: 10px;
  padding: 8px 14px;
  min-height: 0;
  border: 2px solid var(--azul);
  border-radius: 999px;
  background: transparent;
  color: var(--azul);
  font-size: var(--tam-rodape);
  font-weight: 700;
  letter-spacing: .04em;
}
button[data-material-inv-confira-editar] { width: auto; margin: 6px 0 0 auto; }
[data-material-inv-editar-campos] > button[data-grupo-linha]::after { content: '›'; margin-left: 10px; color: var(--azul); font-size: var(--tam-numero); font-weight: 700; }
[data-material-inv-editar-campos] > [data-grupo-linha] > b { font-size: var(--tam-numero); font-weight: 700; }
[data-material-inv-mesma-nf] { width: 100%; font-weight: 700; }
[data-material-inv-remover], [data-material-inv-descontar] { color: var(--vermelho); border-color: var(--vermelho); }
[data-material-inv-desvio], [data-material-inv-editar-de] { color: var(--amarelo); font-weight: 600; line-height: 1.45; }
[data-material-inv-desviado], [data-material-inv-veio-de] { color: var(--amarelo); font-weight: 600; }

/* Estoques: nome e saldo GRANDES; "faz ..." pequeno. Tocar abre o detalhe por fornecedor/NF. */
[data-material-estoque-area] { display: flex; flex-direction: column; background: var(--panel); border-radius: var(--raio); overflow: hidden; }
[data-material-estoque-area] > * + * { border-top: 1px solid var(--line); }
button[data-material-estoque-item] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--alvo-min-px);
  padding: 12px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  text-align: left;
  font-weight: 400;
}
button[data-material-estoque-item]:active { background: var(--panel2); transform: none; }
[data-material-estoque-area] > button[data-material-estoque-item] + button[data-material-estoque-item] { border-top: 1px solid var(--line); }
button[data-material-estoque-item] > span:first-child { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
[data-material-estoque-nome] { font-size: 19px; font-weight: 700; }
button[data-material-estoque-item] small { font-size: var(--tam-rodape); color: var(--ink2); }
[data-material-estoque-saldo] { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
[data-material-estoque-saldo] > b { font-size: var(--tam-numero-3); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--verde); }
[data-material-estoque-saldo] > b[data-valor="ruim"] { color: var(--vermelho); }
[data-material-estoque-fornecedor] { display: flex; flex-direction: column; background: var(--panel); border-radius: var(--raio); overflow: hidden; }
[data-material-estoque-fornecedor] > * + * { border-top: 1px solid var(--line); }

/* ======================================================================================
   PAINEL DA ORDEM -- contrato §3, iniciar (todo processo), mock B1-B4: "📋 Ordem" (grupo:
   total · produzidas em verde · faltam em destaque) e "🏭 Peças produzidas" (tabela Máquina
   · Data · Produzido; `esta` em azul; os outros estados só pela bolinha + palavra).
   ====================================================================================== */
[data-painel-ordem] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espaco);
}
[data-painel-ordem-producao] {
  background: var(--panel);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
[data-painel-ordem-linha] {
  display: grid;
  grid-template-columns: 1.7fr .7fr .9fr;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 9px 16px;
  font-size: var(--tam-corpo);
}
/* Desfaz o crachá genérico de `[data-estado]:not([data-indicador-rede])` (seção 6): mesma
   especificidade (0,2,0), declarado depois -- ganha. A linha é grade, não flex, e nunca
   ganha fundo por estado (§1.5: a bolinha + a palavra é que dizem o estado). */
[data-painel-ordem-linha][data-estado] {
  display: grid;
  width: 100%;
  padding: 9px 16px;
  border-radius: 0;
  background: transparent;
  gap: 8px;
  font-size: var(--tam-corpo);
  font-weight: 400;
  color: var(--ink);
}
[data-painel-ordem-linha] + [data-painel-ordem-linha] { border-top: 1px solid var(--line); }
[data-painel-ordem-linha] > span { display: flex; flex-direction: column; min-width: 0; }
[data-painel-ordem-linha] > span small { font-size: var(--tam-rodape); color: var(--ink2); }
[data-painel-ordem-linha] > span:nth-child(2) { color: var(--ink2); }
[data-painel-ordem-linha] > span:last-child,
[data-painel-ordem-linha] > b { text-align: right; align-items: flex-end; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
/* Cabeçalho da tabela: a linha SEM `data-estado` (Máquina · Data · Produzido). */
[data-painel-ordem-linha]:not([data-estado]) {
  min-height: 0;
  padding: 8px 16px 6px;
  font-size: var(--tam-rodape);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink2);
}
[data-painel-ordem-linha]:not([data-estado]) > span:last-child { color: var(--ink2); font-weight: 400; }
/* Esta máquina: azul, número 22px. */
[data-painel-ordem-linha][data-estado="esta"] > span:first-child > :first-child,
[data-painel-ordem-linha][data-estado="esta"] > span:last-child,
[data-painel-ordem-linha][data-estado="esta"] > b { color: var(--azul); font-weight: 700; }
[data-painel-ordem-linha][data-estado="esta"] > span:last-child,
[data-painel-ordem-linha][data-estado="esta"] > b { font-size: var(--tam-numero); }
/* Os demais estados NÃO pintam a linha (§1.5): a bolinha `[data-ponto]` + a palavra dizem
   produzindo (verde) / setup (azul) / parado (vermelho) / livre (cinza) / outra (neutro). */
[data-painel-ordem-linha][data-estado="produzindo"],
[data-painel-ordem-linha][data-estado="outra"],
[data-painel-ordem-linha][data-estado="livre"],
[data-painel-ordem-linha][data-estado="setup"],
[data-painel-ordem-linha][data-estado="parado"] { color: var(--ink); background: transparent; }

/* ======================================================================================
   CONFIRMAÇÃO DE FINALIZAÇÃO -- contrato §3, mock C1d/C2c/C3d/C4c: quem (3 linhas de
   destaque) · esta sessão (2 números grandes: boas verde, ruins vermelho) · produção total
   da OP por máquina · CONFIRMAR (verde médio) / CANCELAR (vermelho).
   ====================================================================================== */
[data-confirmacao-fim] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espaco);
}
/* Quem: se a frente não marcar `data-grupo-linha="destaque"`, as linhas ganham o destaque
   por estar dentro de `[data-confirmacao-quem]`. */
[data-confirmacao-quem] {
  background: var(--panel);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
[data-confirmacao-quem] > * + * { border-top: 1px solid var(--line); }
[data-confirmacao-quem] [data-grupo-linha] { background: var(--panel2); }
[data-confirmacao-quem] [data-grupo-linha] > span { font-weight: 600; }
[data-confirmacao-quem] [data-grupo-linha] > b { font-size: var(--tam-numero); font-weight: 700; }
/* Esta sessão: N números grandes lado a lado (mock `.numeros`): 40px com 2, 32px com 3. */
[data-confirmacao-sessao] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 14px 8px 6px;
  background: var(--panel);
  border-radius: var(--raio);
}
[data-grupo] > [data-confirmacao-sessao] { border-radius: 0; }
[data-confirmacao-sessao] > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
[data-confirmacao-sessao] > div + div { border-left: 1px solid var(--line); }
[data-confirmacao-sessao] b { font-size: var(--tam-numero-2); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
[data-confirmacao-sessao="3"] b { font-size: var(--tam-numero-3); }
[data-confirmacao-sessao] span { font-size: var(--tam-rodape); color: var(--ink2); }
/* Produção total da OP por máquina (tabela de 2 colunas). */
[data-confirmacao-op] {
  background: var(--panel);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
[data-confirmacao-op-linha] {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 9px 16px;
  font-size: var(--tam-corpo);
}
[data-confirmacao-op-linha] + [data-confirmacao-op-linha] { border-top: 1px solid var(--line); }
[data-confirmacao-op-linha] > span { display: flex; flex-direction: column; min-width: 0; }
[data-confirmacao-op-linha] > span small { font-size: var(--tam-rodape); color: var(--ink2); }
[data-confirmacao-op-linha] > span:last-child,
[data-confirmacao-op-linha] > b { text-align: right; align-items: flex-end; font-weight: 600; font-variant-numeric: tabular-nums; }
[data-confirmacao-op-linha]:not([data-linha]) { min-height: 0; padding: 8px 16px 6px; font-size: var(--tam-rodape); text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); }
[data-confirmacao-op-linha][data-linha="atual"] > span:first-child > :first-child,
[data-confirmacao-op-linha][data-linha="atual"] > span:last-child,
[data-confirmacao-op-linha][data-linha="atual"] > b { color: var(--azul); font-weight: 700; }
[data-confirmacao-op-linha][data-linha="atual"] > span:last-child,
[data-confirmacao-op-linha][data-linha="atual"] > b { font-size: var(--tam-numero); }
/* "Outras máquinas que operaram esta ordem": subtítulo de tabela, sem separador. */
[data-confirmacao-op-linha][data-linha="sub"] { min-height: 0; padding: 10px 16px 2px; border-top: 0; font-size: var(--tam-rodape); text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); }
[data-confirmacao-op-linha][data-linha="total"] { background: var(--panel2); }
[data-confirmacao-op-linha][data-linha="total"] > span:first-child,
[data-confirmacao-op-linha][data-linha="falta"] > span:first-child { font-weight: 600; }
[data-confirmacao-op-linha][data-linha="total"] > span:last-child,
[data-confirmacao-op-linha][data-linha="total"] > b,
[data-confirmacao-op-linha][data-linha="falta"] > span:last-child,
[data-confirmacao-op-linha][data-linha="falta"] > b { font-size: var(--tam-numero); font-weight: 700; }
/* Faltam: amarelo (pendente); ordem completa: `data-valor="ok"` na linha -> verde. */
[data-confirmacao-op-linha][data-linha="falta"] > span:last-child,
[data-confirmacao-op-linha][data-linha="falta"] > b { color: var(--amarelo); }
[data-confirmacao-op-linha][data-linha="falta"][data-valor="ok"] > span:last-child,
[data-confirmacao-op-linha][data-linha="falta"][data-valor="ok"] > b,
[data-confirmacao-op-linha][data-linha="falta"][data-valor="ok"] small { color: var(--verde); }
/* CONFIRMAR (verde, médio) / CANCELAR (vermelho) -- valem mesmo sem `data-cor-cheia`/
   `data-cor-perigo`, para a tela nunca sair sem cor. */
[data-confirmacao-confirmar] {
  background: var(--verde);
  color: var(--texto-sobre-verde);
  border: 0;
  font-weight: 700;
  min-height: var(--alvo-min-px);
}
[data-confirmacao-cancelar] {
  background: var(--vermelho);
  color: #fff;
  border: 0;
  font-weight: 700;
}

/* Contrato §3: perguntas de fim -- "Quantas peças ruins?" (com NENHUMA) e "Quantas barras
   foram utilizadas no Torno X nesta sessão?": só empilham (título + contexto + teclado). */
[data-finalizar-ruins],
[data-finalizar-barras-usadas] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espaco);
}
[data-finalizar-nenhuma] { font-size: var(--tam-sub); font-weight: 600; }

/* Contrato §3: `[data-iniciar-maquina-chip-uso]` já tratado na grade; ficha de "esta
   máquina" no painel também pode vir como `[data-valor="azul"]`. */

/* Minha ordem (mock A7): FINALIZAR verde; Pausar e Trocar a OP lado a lado em cinza. */
[data-contexto-sessao] > p:first-child { font-size: var(--tam-sub); color: var(--ink2); padding: 0 4px; }
[data-fluxo="contexto"] > h2 { font-size: var(--tam-titulo); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; padding: 6px 4px 0; }
[data-contexto-nome] { font-size: var(--tam-sub); font-weight: 400; color: var(--ink2); padding: 0 4px; }
/* 17/09 (mock A7): Pausar/Retomar + Trocar a OP lado a lado; sem :has, empilham (funcional). */
[data-contexto-sessao] > div:has(> [data-contexto-pausar]), [data-contexto-sessao] > div:has(> [data-contexto-retomar-pausa]) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* =====================================================================================
   17/09 -- integracao das frentes do visual novo: regras pedidas pelas telas que o tema
   ainda nao tinha (ver docs/visual-novo-contrato.md §3 e os relatorios das frentes).
   ===================================================================================== */
/* identificacao: teclado do numero (visao secundaria) e o voltar em texto */
[data-identificacao-digitacao] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-identificacao-digitacao-voltar], [data-pausa-voltar] { background: transparent; border: 0; box-shadow: none; color: var(--azul); font-weight: 600; min-height: var(--alvo-min-px); }
[data-identificacao-confirmar] { display: grid; gap: 12px; }
[hidden] { display: none !important; }
/* iniciar: legenda das cores sob a grade de maquinas; emoji da etapa do roteiro; INICIAR desligado */
[data-iniciar-maquina] > [data-ficha-cinza] { display: flex; flex-wrap: wrap; gap: 6px 14px; }
[data-iniciar-roteiro-etapa] > [data-emoji] { flex: 0 0 30px; font-size: 20px; text-align: center; }
[data-iniciar-painel-continuar]:disabled, [data-cor-cheia]:disabled { opacity: .45; }
/* finalizar: tabela da OP (cabecalho e subtitulo), numeros do comprovante, tecla NENHUMA */
[data-confirmacao-op-linha][data-linha="cabecalho"] { min-height: 0; padding: 8px 16px 6px; font-size: var(--tam-rodape); text-transform: uppercase; color: var(--ink2); }
[data-confirmacao-op-linha][data-linha="sub"] { min-height: 0; padding: 10px 16px 2px; font-size: var(--tam-rodape); text-transform: uppercase; color: var(--ink2); border-top: 0; }
[data-confirmacao-op-linha][data-linha="total"] > b, [data-confirmacao-op-linha][data-linha="falta"] > b { font-size: var(--tam-numero-1, 22px); font-weight: 700; }
[data-confirmacao-op-linha][data-linha="falta"] { background: var(--panel2); }
[data-comprovante-numeros] { display: grid; grid-template-columns: 1fr 1fr; padding: 14px 8px 6px; }
[data-comprovante-numero] { display: flex; flex-direction: column; align-items: center; gap: 2px; }
[data-comprovante-numero] + [data-comprovante-numero] { border-left: 1px solid var(--line); }
[data-comprovante-numero] > b { font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
[data-comprovante-numero] > span { font-size: var(--tam-rodape); color: var(--ink2); }
[data-comprovante-contexto] { grid-column: 1 / -1; font-size: var(--tam-rodape); color: var(--ink2); text-align: center; padding: 4px 16px 12px; }
[data-teclado-extra="data-finalizar-nenhuma"], [data-teclado-extra="data-material-nenhuma"] { font-size: 15px; font-weight: 600; }
/* material: lote na etiqueta dentro da linha destaque; torno escolhido; consumo so leitura; bolinha no rodape */
[data-grupo-linha] [data-material-lote-grande] { display: inline; background: none; border: 0; padding: 0; font-size: 40px; letter-spacing: .04em; }
[data-cartao][data-valor="azul"] { border-color: var(--azul); background: color-mix(in srgb, var(--azul) 18%, var(--panel)); }
[data-material-retiradas] [data-cartao][disabled] { opacity: 1; color: var(--ink); }
[data-cartao][disabled] [data-cartao-chevron] { display: none; }
[data-grupo] > [data-material-inv-teclado] { padding: 8px 12px 12px; }
/* trocar OP: as duas linhas agora vivem num grupo -- sem fundo/raio proprio */
[data-trocar-op-atual], [data-trocar-op-nova] { border-radius: 0; }

/* TRAVAS (dono, 22/09) -- componentes/trava.js: título em vermelho, faixa FALTA, o bloco que a
   liderança lê, "voltar" cheio e "chamar liderança" em contorno; cartões da liderança em coluna. */
[data-trava] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-trava] > [data-trava-titulo] { margin: 0; }
[data-trava] > [data-trava-titulo="alerta"] { color: var(--vermelho); }
[data-trava] > [data-trava-sub] { margin: -4px 0 0; color: var(--ink2); font-size: var(--tam-corpo); }
[data-trava-liderancas] { display: flex; flex-direction: column; gap: 8px; }
[data-trava-senha] [data-teclado-valor] { letter-spacing: .4em; }

/* ======================================================================================
   CONSULTAR ORDEM (dono, 22/09) -- a porta sem crachá do repouso e a lista do que está
   operando agora. Mesma gramática de grupos/linhas do contrato de 16/09; cor só com
   significado (verde = operando/boas, amarelo = falta/conferir, azul = a porta de consulta).
   ====================================================================================== */
[data-fluxo="consulta-ordem"] { border-top-color: var(--azul); }

/* Repouso: botão de contorno azul, largura inteira, abaixo da grade de quatro. */
[data-repouso-consulta] {
  flex-direction: column;
  gap: 0;
  background: transparent;
  border: 2px solid var(--azul);
  color: var(--azul);
  min-height: var(--alvo-min-px);
}
[data-repouso-consulta] [data-repouso-legenda] { color: var(--ink2); opacity: 1; }
[data-secao][data-secao-dupla] { display: flex; justify-content: space-between; gap: 8px; }
[data-secao][data-secao-dupla] > span:last-child { text-transform: none; letter-spacing: 0; font-weight: 600; }
[data-fluxo="consulta-ordem"] [data-secao][data-secao-dupla] > span:last-child:not(:empty) { color: var(--amarelo); }
[data-consulta-maquina] > span:first-child { font-weight: 600; }
[data-consulta-maquina] [data-consulta-falta] { color: var(--amarelo); font-weight: 600; }
[data-consulta-direita] {
  flex: 0 0 auto !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  white-space: nowrap;
}
[data-consulta-direita] > b { font-size: var(--tam-sub); font-weight: 600; }
[data-consulta-direita] > small { font-size: var(--tam-rodape); color: var(--ink2); font-weight: 600; }
[data-consulta-direita] > small[data-valor="ok"] { color: var(--verde); }

/* Consulta: título, subtítulo, notas. */
[data-consulta-topo] { padding: 6px 4px 8px; }
[data-consulta-titulo] { font-size: var(--tam-titulo); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
[data-consulta-sub] { font-size: var(--tam-sub); color: var(--ink2); margin-top: 3px; }
[data-consulta-nota] { font-size: var(--tam-rodape); color: var(--ink2); text-align: center; padding: 2px 4px; }
[data-fluxo="consulta-ordem"] { display: flex; flex-direction: column; gap: 8px; }

/* Processo tocável: barra de avanço contra o pedido, embaixo da linha inteira. */
[data-consulta-processos] > button[data-grupo-linha] { flex-wrap: wrap; }
[data-consulta-barra] {
  flex-basis: 100%;
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--panel2);
  overflow: hidden;
  margin-top: 4px;
}
[data-consulta-barra] > i { display: block; height: 100%; background: var(--amarelo); border-radius: 4px; }
[data-consulta-barra] > i[data-completo] { background: var(--verde); }
[data-consulta-vazio] > span,
[data-consulta-vazio] > b { color: var(--ink3); font-weight: 400; }

/* Cartão de sessão (versão A): quem + horário à esquerda, boas grandes à direita, números
   da pessoa embaixo. Sessão aberta ganha a faixa verde (operando) ou vermelha (parada). */
[data-consulta-sessao] { padding: 11px 16px; display: flex; flex-direction: column; gap: 4px; }
[data-consulta-sessao][data-consulta-viva="operando"] { background: rgba(52, 199, 89, .08); box-shadow: inset 3px 0 0 var(--verde); }
[data-consulta-sessao][data-consulta-viva="parada"] { box-shadow: inset 3px 0 0 var(--vermelho); }
[data-consulta-sessao-cab] { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
[data-consulta-quem] { font-weight: 600; font-size: 16px; color: var(--ink); }
[data-consulta-quando] { font-size: var(--tam-rodape); color: var(--ink2); }
[data-consulta-boas] { font-size: var(--tam-numero); font-weight: 700; color: var(--verde); text-align: right; line-height: 1.1; font-variant-numeric: tabular-nums; }
[data-consulta-boas][data-valor="cinza"] { color: var(--ink3); }
[data-consulta-boas] > small { display: block; font-size: 11px; font-weight: 500; color: var(--ink2); text-transform: uppercase; }
[data-consulta-kpis] { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--tam-rodape); color: var(--ink2); font-variant-numeric: tabular-nums; }
[data-consulta-kpis] b { color: var(--ink); font-weight: 600; }
[data-consulta-kpis] b[data-valor="pendente"] { color: var(--amarelo); }
[data-consulta-kpis] b[data-valor="ruim"] { color: var(--vermelho); }
/* INSPEÇÃO POR ETAPAS (dono, 23/09): cada etapa é um liga/desliga; marcada fica azul. */
[data-qualidade-etapa] { border-left: 6px solid transparent !important; }
[data-qualidade-etapa] > [data-marca] { font-style: normal; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ink3); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #062038; }
[data-qualidade-etapa][aria-pressed="true"] { background: color-mix(in srgb, var(--azul) 30%, var(--panel)); border-left-color: var(--azul) !important; }
[data-qualidade-etapa][aria-pressed="true"] > [data-marca] { background: var(--azul); border-color: var(--azul); }
[data-qualidade-etapa][aria-pressed="false"] > span, [data-qualidade-etapa][aria-pressed="false"] > b { opacity: .75; }
[data-qualidade-etapa-meta] { text-align: right; line-height: 1.2; }
[data-qualidade-etapas] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-qualidade-etapas-sessao] { color: var(--azul); font-weight: 600; font-size: var(--tam-corpo); }

/* ======================================================================================
   AJUSTE PELA LIDERANÇA (dono, 23–24/09) -- engrenagem na Consultar ordem, faixa do modo
   ajuste, cartão de sessão tocável no modo ajuste e o histórico "Ajustes registrados".
   ====================================================================================== */
[data-consulta-topo] { position: relative; }
[data-consulta-engrenagem] {
  position: absolute; top: 0; right: 0;
  width: var(--alvo-min-px); height: var(--alvo-min-px);
  border: 1.5px solid var(--line); border-radius: var(--raio); background: var(--panel);
  color: var(--ink2); font-size: 22px; line-height: 1; padding: 0;
}
[data-consulta-modo-ajuste] {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; border-radius: var(--raio);
  background: var(--azul); color: #fff; font-weight: 700; font-size: var(--tam-sub);
}
[data-consulta-modo-ajuste] > small { font-weight: 500; opacity: .9; font-size: var(--tam-rodape); }
button[data-consulta-sessao] { width: 100%; text-align: left; border: 0; background: var(--panel); color: var(--ink); }
button[data-consulta-sessao]::after { content: '✎ tocar para ajustar'; font-size: var(--tam-rodape); color: var(--azul); font-weight: 600; }
[data-consulta-sessao][data-consulta-ajustada] [data-consulta-boas] { color: var(--azul); }
[data-ajuste-campos] > [data-grupo-linha] > b[data-valor="cinza"] { color: var(--ink3); }
[data-ajuste-item] { padding: 11px 16px; display: flex; flex-direction: column; gap: 6px; }
[data-ajuste-item][data-ajuste-desfeito] { opacity: .55; }
[data-ajuste-tag] { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--azul); border: 1.5px solid var(--azul); border-radius: 999px; padding: 2px 8px; align-self: flex-start; white-space: nowrap; }
[data-ajuste-item][data-ajuste-desfeito] [data-ajuste-tag] { color: var(--ink2); border-color: var(--line); }
[data-ajuste-mudancas] { display: flex; flex-direction: column; gap: 2px; font-size: var(--tam-rodape); color: var(--ink2); }
[data-ajuste-mudanca] { display: flex; justify-content: space-between; gap: 8px; }
[data-ajuste-mudanca] > b { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
[data-ajuste-desfazer] { align-self: flex-end; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--raio); background: transparent; color: var(--ink2); font-size: var(--tam-rodape); font-weight: 600; }
[data-ajuste-pessoas], [data-ajuste-maquinas] { max-height: 46vh; overflow-y: auto; }

/* ======================================================================================
   FERRAMENTAS (dono, 23/09) -- catálogo e inventário do Armário do Torno
   (src/ui/telas/ferramentas.js; PRD docs/PRD-ferramentas-armario-torno.md). Os lados como dois
   alvos grandes com a grade em miniatura; a prateleira como grade de N colunas (`--ferr-colunas`
   vem do cadastro), alvo >= 88 px; borda verde/amarela = conferida hoje (com a palavra junto);
   tracejado = posição sem caixa; fotos em faixa rolável; teclado na própria linha (como o
   inventário do material).
   ====================================================================================== */
[data-ferr-palco] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-ferr-sub] { color: var(--ink2); font-size: var(--tam-sub); margin: -4px 0 2px; padding: 0 4px; }
[data-ferr-voltar] { background: transparent; border: 0; color: var(--azul); font-weight: 500; min-height: var(--alvo-min-px); }
[data-ferr-menu-lista] { display: flex; flex-direction: column; gap: 8px; }
[data-ferr-botao] { flex-direction: column; gap: 2px; min-height: max(var(--alvo-min-px), 60px); }
[data-ferr-botao] [data-ferr-botao-legenda] { font-weight: 500; font-size: var(--tam-rodape); color: var(--ink2); }
[data-ferr-botao][data-cor-cheia] [data-ferr-botao-legenda] { color: var(--texto-sobre-verde, rgba(6, 36, 15, .75)); }
[data-ferr-botao][data-contorno] [data-ferr-botao-legenda] { color: var(--ink2); }
[data-ferr-botao]:disabled { opacity: .35; }
/* A3 -- os dois lados, como o operador vê de frente (E à esquerda, D à direita) */
[data-ferr-lados] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
[data-ferr-lado] { flex-direction: column; gap: 8px; min-height: 220px; padding: 18px 12px 14px; background: var(--panel); border-radius: 16px; }
[data-ferr-lado-letra] { font-size: 52px; font-weight: 800; line-height: 1; }
[data-ferr-lado-nome] { font-size: var(--tam-corpo); font-weight: 700; }
[data-ferr-lado-conta] { color: var(--ink2); font-size: var(--tam-sub); font-weight: 500; }
[data-ferr-mini] { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
[data-ferr-mini-linha] { display: grid; grid-template-columns: repeat(var(--ferr-colunas, 6), 14px); gap: 3px; }
[data-ferr-mini-caixa] { display: block; width: 14px; height: 10px; border: 1.5px solid var(--ink2); border-radius: 2px; }
[data-ferr-mini-caixa="sem"] { border-style: dashed; border-color: var(--ink3); opacity: .5; }
[data-ferr-mini-caixa="ok"] { border-color: var(--verde); background: var(--verde-claro); }
[data-ferr-mini-caixa="bandeja"] { border-color: var(--vermelho); }
/* A4 -- a prateleira: N posições na ordem do cadastro */
[data-ferr-grade] { display: grid; grid-template-columns: repeat(var(--ferr-colunas, 6), minmax(0, 1fr)); gap: 8px; }
/* ARMÁRIO DA PRENSA (06/10/2026): a Manutenção fica FORA da grade (mesmo desenho de célula, borda tracejada
   azul = não é prateleira); o topo é uma linha de 1 coluna (`--ferr-colunas: 1`), na largura toda; as
   prateleiras dizem embaixo do título "esquerda · meio · direita". */
[data-ferr-fora-grade] { display: grid; grid-template-columns: repeat(var(--ferr-colunas, 1), minmax(0, 1fr)); gap: 8px; }
[data-ferr-caixa][data-tipo-lugar="TOPO"] [data-ferr-caixa-etiqueta] { font-size: 15px; }
[data-ferr-grade] > [data-ferr-caixa], [data-ferr-fora-grade] > [data-ferr-caixa] {
  flex-direction: column; justify-content: center; gap: 4px; min-height: 92px; padding: 8px 4px;
  border-radius: 10px; background: var(--panel); border: 2px solid transparent; font-weight: 400; text-align: center;
}
/* 07/10: DEPOIS da regra comum (o atalho `border` dela zerava a cor e a Manutenção ficava igual às outras); a
   conferida (verde/amarelo, logo abaixo) continua por cima */
[data-ferr-fora-grade] > [data-ferr-caixa] { border: 2px dashed var(--azul); }
[data-ferr-caixa-etiqueta] { font-weight: 800; font-size: 13px; line-height: 1.15; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } /* 05/10: hífen em vez de cortar a palavra no meio (DIANTEI RA) */
[data-ferr-caixa-conta] { color: var(--ink2); font-size: 12px; line-height: 1.2; }
[data-ferr-caixa][data-situacao="VAZIA"] [data-ferr-caixa-etiqueta] { color: var(--ink3); font-weight: 600; }
[data-ferr-grade] > [data-ferr-caixa][data-situacao="SEM_CAIXA"] {
  display: flex; align-items: center; justify-content: center; background: transparent; border: 2px dashed var(--line);
  color: var(--ink3); font-size: 12px; cursor: default;
}
[data-ferr-caixa][data-conferida="ok"] { border-color: var(--verde); }
[data-ferr-caixa][data-conferida="ok"] [data-ferr-caixa-conta] { color: var(--verde); }
[data-ferr-caixa][data-conferida="dif"] { border-color: var(--amarelo); }
[data-ferr-caixa][data-conferida="dif"] [data-ferr-caixa-conta] { color: var(--amarelo); }
/* A5 -- fotos e navegação anterior/próxima */
[data-ferr-fotos] { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
[data-ferr-fotos] img { height: 132px; width: auto; border-radius: 10px; flex: none; background: var(--panel2); }
[data-ferr-fotos-legenda] { color: var(--ink3); font-size: var(--tam-rodape); align-self: flex-end; flex: none; padding-bottom: 6px; }
[data-ferr-nav] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
[data-ferr-nav] > button { min-height: 60px; }
/* A6 -- a linha em edição e o teclado dentro do grupo (mesma regra do inventário do material) */
[data-ferr-inv-item][data-estado="editando"] { background: var(--panel2); }
[data-ferr-inv-item] > b[data-ferr-inv-informar] { color: var(--ink3); font-weight: 400; font-size: var(--tam-corpo); }
[data-ferr-inv-item] > b { font-size: 22px; }
[data-ferr-inv-teclado] { padding: 10px 12px 12px; background: var(--panel2); }
[data-ferr-inv-teclado] [data-teclado-valor] { display: none; }
[data-ferr-inv-cancelar] { background: transparent; border: 0; color: var(--vermelho); font-weight: 600; min-height: var(--alvo-min-px); }
button[data-ferr-incluir] > span > span:first-child { color: var(--azul); font-weight: 600; }
/* A7c -- o único campo de texto do módulo */
[data-ferr-campo-texto] { background: var(--panel); border-radius: var(--raio); padding: 6px 8px; }
[data-ferr-campo-texto] input { background: transparent; border: 0; color: var(--ink); font-size: 24px; font-weight: 600; text-transform: uppercase; justify-content: flex-start; text-align: left; }
[data-ferr-campo-texto] input::placeholder { color: var(--ink3); font-size: var(--tam-sub); font-weight: 400; text-transform: none; }
[data-ferr-novo-previa] { font-size: var(--tam-sub); }
/* A10 -- resultado da busca */
[data-ferr-busca-area] { display: flex; flex-direction: column; gap: 4px; }

/* ======================================================================================
   FERRAMENTAS v3 (24/09) -- setup (telas/setup-ferramentas.js: B1 troca, B3 caixa, B4 1ª vez,
   B5 rota, B7 trocar uma), inventário com ✎ (C1–C5) e o menu (F1). Chips = escolha com
   `aria-pressed`; a cor diz o destino (azul caixa · amarelo afiar/pendente · vermelho descarte ·
   verde nova). O ✎ é a SEGUNDA área de toque da linha, sempre visível, separada por um traço.
   ====================================================================================== */
[data-ferr-chips] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; padding: 4px 0 2px; }
[data-ferr-chips] > small { color: var(--ink2); font-size: var(--tam-rodape); }
[data-chip] {
  width: auto; flex: 0 0 auto; min-height: 52px; margin: 0; padding: 8px 14px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--bg); color: var(--ink2); font-size: var(--tam-sub); font-weight: 600;
}
[data-chip][aria-pressed="true"] { border-color: var(--azul); color: var(--ink); background: var(--azul-claro); }
[data-chip="ok"][aria-pressed="true"] { border-color: var(--verde); background: var(--verde-claro); }
[data-chip="ruim"][aria-pressed="true"] { border-color: var(--vermelho); background: var(--vermelho-claro); }
[data-chip="pendente"][aria-pressed="true"] { border-color: var(--amarelo); background: var(--amarelo-claro); }
[data-chip="pendente"]:not([aria-pressed="true"]) { color: var(--amarelo); }
[data-ferr-troca-numeros] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
[data-ferr-troca-numero] { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; background: var(--panel); border-radius: 14px; }
[data-ferr-troca-numero] > b { font-size: var(--tam-numero); font-weight: 800; line-height: 1.1; }
[data-ferr-troca-numero] > span { color: var(--ink2); font-size: var(--tam-sub); }
[data-ferr-troca] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-ferr-troca] [data-grupo-linha] { align-items: flex-start; }
[data-ferr-troca-entra][data-falta] > span > small { color: var(--vermelho); }
[data-ferr-troca-entra][data-falta] { background: var(--vermelho-claro); }
[data-ferr-tag] { font-style: normal; font-size: 12px; font-weight: 800; padding: 1px 7px; border-radius: 6px; background: var(--amarelo-claro); color: var(--amarelo); }
[data-ferr-tag="corrigido"] { background: var(--azul-claro); color: var(--azul); }
[data-ferr-troca-faixa] { border-radius: var(--raio); padding: 12px 16px; font-size: var(--tam-sub); background: var(--azul-claro); color: var(--azul); }
[data-ferr-troca-faixa="pendente"] { background: var(--amarelo-claro); color: var(--amarelo); }
[data-ferr-troca-faixa="ruim"] { background: var(--vermelho-claro); color: var(--vermelho); }
[data-ferr-troca-falta-dizer] { color: var(--amarelo); font-weight: 700; }
[data-ferr-caixa][data-atual] { border-color: var(--azul) !important; }
[data-ferr-caixa][data-bandeja], [data-ferr-caixa][data-situacao="BANDEJA"] { border: 2px solid var(--vermelho); }
/* B5 -- rota numerada, código da caixa grande à direita */
[data-ferr-rota-n] {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--panel2); color: var(--ink); font-style: normal; font-size: 13px; font-weight: 700; margin-right: 4px;
}
[data-ferr-rota-parada] > b { font-size: 22px; font-weight: 800; }
[data-ferr-rota-corrigir] { min-height: 60px; }
[data-setup-maquina-kit] { display: block; color: var(--ink2); font-size: 12px; font-weight: 500; }

/* ======================================================================================
   SETUP v4 EM TRÊS FASES (28/09) + v5 (29/09) -- telas/setup.js (T1 cartões, T2 tipo, T3 peça, T4
   máquina) e telas/setup-ferramentas.js (T5 lista do armário · "Onde está?" · T6 · T7 cronômetro · T9 o
   que saiu, em três campos · T11 troca de ferramenta · "+ Incluir item" · mapa · molde de texto livre ·
   busca no catálogo). Reusa os chips e as faixas da v3.
   ====================================================================================== */
[data-ferr-troca-faixa="ok"] { background: var(--verde-claro); color: var(--verde); }
[data-setup-coleta], [data-setup-pos], [data-setup-em-andamento], [data-setup-iniciar-tela],
[data-setup-onde-esta], [data-setup-qual-destas], [data-setup-mapa], [data-setup-molde], [data-setup-incluir-tela],
[data-setup-desistir-tela], [data-setup-troca-ferramenta], [data-incluir-item] {
  display: flex; flex-direction: column; gap: var(--espaco);
}
[data-setup-coleta] [data-grupo-linha], [data-setup-pos] [data-grupo-linha], [data-setup-troca-ferramenta] [data-grupo-linha],
[data-setup-onde-esta] [data-grupo-linha], [data-incluir-item] [data-grupo-linha] { align-items: flex-start; }
[data-setup-coleta] [data-grupo-linha] > [data-ferr-troca-faixa] { flex-basis: 100%; padding: 6px 10px; font-size: var(--tam-rodape); }
[data-setup-coleta-linha][data-estado="separado"] > span > span:first-child,
[data-setup-pos-linha][data-destino]:not([data-destino=""]) > span > span:first-child { color: var(--azul); font-weight: 700; }
[data-setup-coleta-linha][data-estado="falta"] { background: var(--vermelho-claro); }
[data-setup-pos-linha][data-destino="FEITO"] { opacity: .6; }
[data-setup-coleta-nota], [data-setup-pos-nota], [data-setup-pos-feito] { flex-basis: 100%; }
[data-riscado] { text-decoration: line-through; color: var(--ink3); }
button[data-grupo-linha]:disabled { opacity: 1; cursor: default; }
/* T1 -- o cartão do v4 é um botão: máquina · peças · quem em cima, a fase embaixo */
button[data-setup-andamento-item] { width: 100%; text-align: left; align-items: stretch; min-height: var(--alvo-min-px); color: var(--ink); font-weight: 400; }
[data-setup-andamento-item][data-proprio] { border-left: 4px solid var(--azul); }
[data-setup-andamento-rotulo] { font-size: var(--tam-rodape); text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); padding: 4px 16px 0; }
[data-setup-andamento-maquina] { font-weight: 700; font-size: var(--tam-corpo); }
[data-setup-andamento-fase] { font-size: var(--tam-sub); color: var(--azul); font-weight: 600; }
[data-setup-andamento-fase="POS"] { color: var(--amarelo); }
[data-setup-andamento-preparado] { font-size: var(--tam-rodape); }
[data-setup-esquecidos] { padding: 4px 16px; }
/* T4 -- a peça que a máquina roda e o setup em andamento nela */
[data-setup-maquina-peca], [data-setup-maquina-andamento] { display: block; color: var(--ink2); font-size: 12px; font-weight: 500; }
[data-setup-maquina-andamento] { color: var(--azul); }
/* T2 (v5) -- o tipo com a legenda da categoria embaixo ("mudar a peça que a máquina faz") */
button[data-setup-opcao-tipo] { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; }
button[data-setup-opcao-tipo] + button[data-setup-opcao-tipo] { margin-top: 8px; }
[data-setup-tipo-rotulo] { font-size: var(--tam-corpo); font-weight: 700; }
[data-setup-tipo-legenda] { font-size: var(--tam-rodape); font-weight: 500; color: var(--ink2); }
/* T5 (v5) -- a linha da ficha sem item que achou o item de mesmo nome no catálogo: "no catálogo: …" em azul;
   o "não é esta · onde está?" é o chip pequeno (o segundo caminho da linha, não uma ação dela) */
[data-setup-coleta-linha][data-candidato] > span > small { color: var(--azul); }
[data-chip][data-setup-nao-e-esta] { font-size: var(--tam-rodape); font-weight: 500; border-style: dashed; }
/* T7 e T11 -- o cronômetro grande */
[data-setup-cronometro] { font-size: 56px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -.02em; padding: 8px 0; }
/* T9 e T11 (v5) -- três campos (SAI · FICA · ENTRA): a linha com destino/condição escolhida em azul; o
   "+ Incluir" como a última linha do campo, em azul; o "falta dizer" em amarelo */
[data-troca-linha][data-destino]:not([data-destino=""]) > span > span:first-child { color: var(--azul); font-weight: 700; }
button[data-setup-pos-incluir] > span > span:first-child, button[data-troca-incluir] > span > span:first-child,
button[data-incluir-buscar] > span > span:first-child, button[data-incluir-escrever] > span > span:first-child { color: var(--azul); font-weight: 700; }
[data-troca-falta-dizer], [data-setup-pos-falta-dizer] { color: var(--amarelo); font-weight: 700; }
/* o mapa com mais de um armário: a fileira dos armários no topo */
[data-setup-mapa-armarios] { padding: 0 0 4px; }
/* Revisão de 29/09 -- "Onde está?": o item de outro tipo fica na tela (reconhecer a caixa) mas apagado, sem
   toque; "Mais N caixas prováveis ›" em azul, como os "+ Incluir" */
[data-grupo-linha][data-apagado], button[data-grupo-linha][data-apagado]:disabled { opacity: .45; }
button[data-setup-onde-mais] > span > span:first-child { color: var(--azul); font-weight: 700; }
/* desistir/cancelar (T6 "Desistir", T11 "Iniciei por engano"): contorno neutro com o texto vermelho -- nunca o
   verde de seguir em frente (B6) */
[data-contorno][data-contorno-desistir] { color: var(--vermelho); border-color: var(--line); }
/* "A TA-07 já faz a 1069" (a mesma peça, antes da lista) e a confira do cancelar a troca */
[data-setup-mesma-peca], [data-troca-cancelar-tela] { display: flex; flex-direction: column; gap: var(--espaco); }
/* repouso -- "N por guardar" no SETUP */
[data-repouso-setup-por-guardar] { display: block; font-size: var(--tam-rodape); font-weight: 700; }
/* C1 -- a linha tem o NÚMERO (contar) e o ✎ (corrigir · mover · tirar) */
[data-ferr-inv-linha] { padding: 0; align-items: stretch; flex-wrap: nowrap; gap: 0; }
[data-ferr-inv-linha] > [data-ferr-inv-item] {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 2px 12px;
  padding: 10px 12px 10px 16px; background: transparent; border: 0; border-radius: 0; text-align: left; font-weight: 400; color: var(--ink);
}
[data-ferr-inv-linha] > [data-ferr-inv-item] > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
[data-ferr-inv-linha] > [data-ferr-inv-item] small { font-size: var(--tam-rodape); color: var(--ink2); }
[data-ferr-inv-linha][data-estado="editando"] { background: var(--panel2); }
[data-ferr-inv-linha] > [data-ferr-inv-lapis] { flex: 0 0 68px; width: 68px; min-height: 76px; border-left: 1px solid var(--line); }
[data-ferr-corrigir-tela] [data-teclado-valor] { display: none; } /* a peça já aparece no campo acima */
button[data-ferr-inv-editar] { width: 68px; min-height: 76px; padding: 0; background: transparent; border: 0; border-left: 1px solid var(--line); border-radius: 0; color: var(--azul); font-size: 26px; }
[data-riscado] { text-decoration: line-through; color: var(--ink3); }
[data-ferr-inv-desfazer] { color: var(--azul); cursor: pointer; }
[data-ferr-corrigir-peca] { background: var(--panel); border-radius: var(--raio); padding: 16px; min-height: 60px; font-size: 24px; font-weight: 700; }
[data-ferr-corrigir-peca] [data-ferr-sugestao] { color: var(--ink3); font-size: var(--tam-sub); font-weight: 400; }
[data-pausa-ferramenta-faixa] { margin-top: 8px; }

/* ======================================================================================
   FERRAMENTAL · AFIAÇÃO (v3, 24/09) -- telas/ferramental.js (E2–E10, dentro da Expedição) e
   componentes/canhoto.js (o FORM 027 em fundo papel). Atributos `[data-afi-*]` e `[data-canhoto*]`.
   ====================================================================================== */
[data-afi-sub] { color: var(--ink2); font-size: var(--tam-sub); margin: -4px 0 2px; padding: 0 4px; }
[data-afi-voltar] { background: transparent; border: 0; color: var(--azul); font-weight: 500; min-height: var(--alvo-min-px); }
[data-afi-lista] { display: flex; flex-direction: column; gap: 8px; }
/* chips de escolha (serviço, prazo, "saem agora?") */
[data-afi-chips] { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
[data-afi-tela] > [data-afi-chips] { padding: 0; }
[data-afi-chip] {
  width: auto; flex: 0 0 auto; min-height: 52px; margin: 0; padding: 8px 14px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--bg); color: var(--ink2); font-size: var(--tam-sub); font-weight: 600;
}
[data-afi-chip][aria-pressed="true"] { border-color: var(--azul); color: var(--ink); background: var(--azul-claro); }
[data-afi-chip="verde"][aria-pressed="true"] { border-color: var(--verde); background: var(--verde-claro); }
[data-afi-chip="vermelho"][aria-pressed="true"] { border-color: var(--vermelho); background: var(--vermelho-claro); }
/* E3 -- linha da bandeja: marcar/tirar à esquerda, quantidade (teclado na linha) à direita */
[data-afi-linha] { display: flex; flex-direction: column; }
[data-afi-linha-topo] { display: flex; align-items: stretch; }
[data-afi-linha-topo] > [data-afi-bandeja] {
  flex: 1 1 auto; min-width: 0; justify-content: flex-start; text-align: left; background: transparent;
  border-radius: 0; font-weight: 400; padding: 10px 8px 10px 16px;
}
[data-afi-bandeja] > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-afi-bandeja] small { font-size: var(--tam-rodape); color: var(--ink2); }
[data-afi-linha][data-marcada="nao"] [data-afi-bandeja] > span > span:first-child { color: var(--ink3); text-decoration: line-through; }
[data-afi-linha-topo] > [data-afi-qtd] {
  flex: 0 0 auto; width: auto; min-width: 76px; background: transparent; border-radius: 0; padding: 0 16px;
  font-size: var(--tam-numero); font-weight: 700; font-variant-numeric: tabular-nums;
}
[data-afi-qtd][data-valor="azul"] { font-size: var(--tam-corpo); }
[data-afi-riscos] { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
[data-afi-riscos] > [data-risco] { display: block; width: 2px; height: 14px; background: var(--ink); border-radius: 1px; transform: skewX(-20deg); }
[data-afi-teclado], [data-afi-ret-teclado] { padding: 10px 12px 12px; background: var(--panel2); display: flex; flex-direction: column; gap: 8px; }
[data-afi-teclado] [data-teclado-valor], [data-afi-ret-teclado] [data-teclado-valor] { display: none; }
[data-afi-ret-acoes] { display: flex; flex-wrap: wrap; gap: 8px; }
[data-afi-ret-acoes] > button { flex: 1 1 200px; min-height: 60px; }
[data-afi-ret-perdida] { background: transparent; border: 2px solid var(--vermelho); color: var(--vermelho); }
[data-afi-ret-limpar] { background: transparent; color: var(--ink2); font-weight: 500; }
button[data-afi-confeccionar] [data-valor="azul"] { color: var(--azul); font-weight: 600; }
[data-afi-aviso-divide]:empty { display: none; }
/* E8/E10 -- número da comanda com a etiqueta (ATRASADA · HOJE · CONFERIR · SEPARADA) */
[data-afi-tag] {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 800;
  letter-spacing: .03em; vertical-align: middle; background: var(--panel2); color: var(--ink2);
}
[data-afi-tag][data-valor="ruim"] { background: var(--vermelho-claro); color: var(--vermelho); }
[data-afi-tag][data-valor="pendente"] { background: var(--amarelo-claro); color: var(--amarelo); }
[data-afi-tag][data-valor="azul"] { background: var(--azul-claro); color: var(--azul); }
[data-afi-prazo-valor] { font-size: var(--tam-numero); }
[data-afi-saiu-agora] { background: transparent; border-radius: 0; color: var(--azul); font-weight: 600; min-height: 60px; }
[data-afi-ret-linha][data-estado="editando"] { background: var(--panel2); }
[data-afi-ret-linha] > b { font-size: var(--tam-numero); }
[data-afi-ret-linha] > b[data-afi-ret-informar] { color: var(--ink3); font-weight: 400; font-size: var(--tam-corpo); }
[data-afi-campo-texto] { background: var(--panel); border-radius: var(--raio); padding: 6px 8px; }
[data-afi-campo-texto] input { background: transparent; border: 0; color: var(--ink); font-size: 24px; font-weight: 600; text-transform: uppercase; justify-content: flex-start; text-align: left; }
[data-afi-campo-texto] input::placeholder { color: var(--ink3); font-size: var(--tam-sub); font-weight: 400; text-transform: none; }
/* E7 -- faixa azul do painel; E9b -- rota numerada do GUARDE AGORA */
[data-afi-faixa-painel] { background: var(--azul-claro); color: var(--azul); border-radius: var(--raio); padding: 12px 16px; font-size: var(--tam-sub); }
[data-afi-rota-n] {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--panel2); color: var(--ink); font-style: normal; font-size: 13px; font-weight: 700;
}
/* O CANHOTO -- o FORM 027 em fundo papel (as mesmas cores da folha impressa, fora do tema escuro de propósito) */
[data-canhoto] {
  --papel: #F7F5EF; --papel-tinta: #1B2230; --papel-linha: #9AA3B2; --papel-cab: #E7E3D8; --papel-cinza: #5B6473; --papel-vermelho: #B3261E;
  background: var(--papel); color: var(--papel-tinta); border-radius: 10px; padding: 14px 14px 12px; margin: 8px 0; font-size: 13px; line-height: 1.35;
}
[data-canhoto-cab] { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border-bottom: 2px solid var(--papel-tinta); padding-bottom: 8px; }
[data-canhoto-logo] { border: 2px solid var(--papel-tinta); font-weight: 900; font-size: 18px; padding: 2px 7px; }
[data-canhoto-titulo] { font-weight: 800; font-size: 14px; text-align: center; letter-spacing: .03em; }
[data-canhoto-num] { text-align: right; font-size: 12px; display: flex; flex-direction: column; align-items: flex-end; }
[data-canhoto-num-valor] { font-size: 20px; font-variant-numeric: tabular-nums; }
[data-canhoto-provavel-aviso] { font-size: 10.5px; color: var(--papel-cinza); }
[data-canhoto-dados] { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 3px 10px; margin: 8px 0; }
[data-canhoto-dados] dt { font-weight: 700; }
[data-canhoto-dados] dd { margin: 0; }
[data-canhoto-urgente] { color: var(--papel-vermelho); }
[data-canhoto-rolo] { overflow-x: auto; }
[data-canhoto-tabela] { width: 100%; border-collapse: collapse; }
[data-canhoto-tabela] th, [data-canhoto-tabela] td { color: var(--papel-tinta); font-size: 12.5px; border: 1px solid var(--papel-linha); padding: 4px 5px; text-align: left; vertical-align: top; }
[data-canhoto-tabela] th { background: var(--papel-cab); font-size: 11px; }
[data-canhoto-tabela] td[data-canhoto-n] { text-align: right; font-variant-numeric: tabular-nums; }
[data-canhoto-visto] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; font-size: 12px; }
[data-canhoto-visto] > div { border-top: 1px solid var(--papel-tinta); padding-top: 3px; }
[data-canhoto-form] { font-size: 10.5px; color: var(--papel-cinza); margin-top: 6px; text-align: right; }
@media (max-width: 420px) {
  [data-canhoto-dados] { grid-template-columns: auto 1fr; }
  [data-canhoto-visto] { grid-template-columns: 1fr; }
}

/* INSPEÇÃO DE LINHA (dono, 28/09) -- telas/inspecao-linha.js. Mesmo desenho do material/expedição:
   grupos, fichas A-D, SIM/NÃO com cor de significado. Maquete: claude.ai/artifact/EcU5xszmbVLpKtMGKAhAgH */
[data-repouso-extras] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
[data-repouso-extras] > button { font-size: 14px; padding: 8px 6px; }
[data-fluxo="inspecao-linha"] { border-top-color: var(--panel2); }
[data-il-palco] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-il-titulo] { font-size: var(--tam-titulo, 26px); font-weight: 700; padding: 2px 4px 0; }
[data-il-sub] { color: var(--ink2); font-size: var(--tam-sub); margin: -4px 0 2px; padding: 0 4px; }
[data-il-voltar] { background: transparent; border: 0; color: var(--azul); font-weight: 500; min-height: var(--alvo-min-px); }
[data-il-grupos] [data-cartao][data-il-vazio] { opacity: .5; }
[data-il-maquina] { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: transparent; border: 0; color: var(--ink); font: inherit; min-height: var(--alvo-min-px); padding: 12px 16px; margin: 0; border-radius: 0; }
[data-il-maquinas] > * + * { border-top: 1px solid var(--line); }
[data-il-maquina-corpo] { flex: 1; display: flex; flex-direction: column; gap: 3px; }
[data-il-maquina-corpo] > b { font-size: var(--tam-corpo); }
[data-il-maquina-corpo] > small { color: var(--ink2); font-size: var(--tam-rodape); }
[data-il-maquina-estado] { font-size: var(--tam-rodape); font-weight: 600; }
[data-il-maquina-estado] > i { margin-right: 5px; }
[data-il-maquina-esperadas] { font-size: var(--tam-corpo); font-weight: 700; color: var(--ink2); font-variant-numeric: tabular-nums; }
[data-il-maquina-livre] { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; opacity: .45; }
[data-il-maquina-livre] > small { color: var(--ink2); font-size: var(--tam-rodape); }
[data-il-horarios] [data-grupo-linha] b { font-variant-numeric: tabular-nums; }
[data-il-faltando-item] { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: transparent; border: 0; color: var(--ink); font: inherit; min-height: 60px; padding: 8px 16px; margin: 0; border-radius: 0; }
[data-il-faltando] > * + * { border-top: 1px solid var(--line); }
[data-il-faltando-item] > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
[data-il-faltando-item] > span > small { color: var(--ink2); font-size: var(--tam-rodape); }
[data-il-faltando-item] > b { font-size: var(--tam-corpo); font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
[data-il-marca] { font-style: normal; min-width: 96px; min-height: 40px; border-radius: 10px; background: var(--panel2); color: var(--ink3); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--tam-rodape); }
[data-il-faltando-item][data-marcado="NAO"] [data-il-marca] { background: var(--vermelho); color: #fff; }
[data-il-faltando-item][data-marcado="NAO"] > b { color: var(--vermelho); }
[data-il-pergunta] { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; }
[data-il-perguntas] > * + * { border-top: 1px solid var(--line); }
[data-il-pergunta] > span:first-child { font-size: var(--tam-corpo); font-weight: 600; }
[data-il-sn] { display: flex; flex-direction: row; gap: 6px; }
[data-il-sn] > button { width: auto; flex: 1 1 0; min-height: 56px; margin: 0; padding: 0 10px; border: 0; border-radius: 10px; background: var(--panel2); color: var(--ink3); font-weight: 700; font-size: var(--tam-sub); }
[data-il-sn] > button[data-marcado="SIM"] { background: var(--verde); color: var(--texto-sobre-verde, #06301a); }
[data-il-sn] > button[data-marcado="NAO"] { background: var(--vermelho); color: #fff; }
[data-il-sn] > button[data-marcado="NAO_HOUVE"] { background: var(--azul); color: var(--texto-sobre-azul); }
[data-il-feitas-confirmar]:disabled, [data-il-faltando-confirmar]:disabled, [data-il-perguntas-continuar]:disabled { opacity: .4; }

/* MEDIÇÃO DA PEÇA (dono, 07/10; .scratch/medicao-peca/SPEC.md; maquete opção C) -- faixa do repouso
   (repouso.js), telas/medicao-peca.js e telas/medicao-config.js. Prefixo `data-mp-*`. Aprova ou reprova:
   verde = dentro, vermelho = fora (sem amarelo); azul = a cota da vez. O âmbar só pisca 2 min antes. */
[data-mp-faixa] { background: var(--panel); border-radius: var(--raio); border: 2px solid var(--azul); padding: 8px; display: flex; flex-direction: column; gap: 8px; }
[data-mp-faixa-cab] { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; font-size: var(--tam-rodape); font-weight: 700; letter-spacing: .04em; color: var(--azul); }
[data-mp-faixa-cab] > [data-mp-config] { width: auto; min-height: 44px; min-width: 56px; padding: 4px 10px; background: transparent; color: var(--ink3); font-size: 20px; }
[data-mp-lista] { display: flex; flex-direction: column; gap: 8px; }
[data-mp-lista] button[data-mp-maquina] { min-height: 96px; justify-content: flex-start; text-align: left; background: var(--panel2); font-weight: 400; padding: 10px 14px 10px 20px; gap: 12px; box-shadow: inset 6px 0 0 var(--ink3); }
[data-mp-lista] button[data-mp-maquina][data-mp-estado="REPROVADA"] { box-shadow: inset 6px 0 0 var(--vermelho); background: var(--vermelho-claro); border: 2px solid var(--vermelho); }
[data-mp-lista] button[data-mp-maquina][data-mp-estado="ATRASADA"] { box-shadow: inset 6px 0 0 var(--vermelho); }
[data-mp-lista] button[data-mp-maquina][data-mp-estado="MEDIR_APOS_PAUSA"] { box-shadow: inset 6px 0 0 var(--vermelho); border: 2px solid var(--vermelho); }
[data-mp-lista] button[data-mp-maquina][data-mp-estado="VENCE"] { box-shadow: inset 6px 0 0 var(--amarelo); }
[data-mp-lista] button[data-mp-maquina][data-mp-estado="PRIMEIRA"] { box-shadow: inset 6px 0 0 var(--azul); }
[data-mp-lista] button[data-mp-maquina][data-mp-estado="EM_DIA"] { box-shadow: inset 6px 0 0 var(--verde); }
[data-mp-lista] button[data-mp-maquina]:disabled { opacity: .5; min-height: 64px; }
[data-mp-corpo] { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-mp-l1] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[data-mp-l1] > b { font-size: 22px; font-weight: 700; }
[data-mp-chip], [data-mp-chip-tipo] { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 2px 10px; background: var(--azul-claro); color: var(--azul); }
[data-mp-chip-tipo][data-valor="ruim"] { background: var(--vermelho-claro); color: var(--vermelho); }
[data-mp-corpo] > small { font-size: 14px; color: var(--ink2); }
[data-mp-estado-texto] { font-size: var(--tam-corpo); }
[data-mp-estado-texto] > i { margin-right: 6px; }
[data-mp-lista] button[data-mp-maquina][data-mp-estado="REPROVADA"] [data-mp-estado-texto],
[data-mp-lista] button[data-mp-maquina][data-mp-estado="ATRASADA"] [data-mp-estado-texto],
[data-mp-lista] button[data-mp-maquina][data-mp-estado="MEDIR_APOS_PAUSA"] [data-mp-estado-texto] { color: var(--vermelho); font-weight: 700; }
[data-mp-chip="pausa"] { background: var(--vermelho-claro); color: var(--vermelho); }
[data-mp-chevron] { font-size: 28px; color: var(--ink3); }
[data-mp-livres] { font-size: var(--tam-rodape); color: var(--ink3); padding: 0 6px 2px; }
@keyframes mp-pisca-ambar { 0%, 100% { background-color: var(--panel2); } 50% { background-color: rgba(255,204,77,.34); } }
@keyframes mp-pisca-vermelho { 0%, 100% { background-color: var(--panel2); } 50% { background-color: rgba(255,90,78,.40); } }
[data-mp-lista] button[data-mp-maquina][data-mp-alerta="amarelo"] { animation: mp-pisca-ambar 1s ease-in-out infinite; }
[data-mp-lista] button[data-mp-maquina][data-mp-alerta="vermelho"] { animation: mp-pisca-vermelho 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  [data-mp-lista] button[data-mp-maquina][data-mp-alerta="amarelo"] { animation: none; background-color: rgba(255,204,77,.26); }
  [data-mp-lista] button[data-mp-maquina][data-mp-alerta="vermelho"] { animation: none; background-color: rgba(255,90,78,.30); }
  [data-mp-volta] > i { animation: none !important; width: 100%; }
}
[data-mp-config="rodape"] { background: transparent; border: 0; color: var(--ink3); font-weight: 500; font-size: var(--tam-rodape); min-height: 48px; }

/* telas da medição */
[data-fluxo="medicao-peca"], [data-fluxo="medicao-config"] { border-top-color: var(--panel2); }
[data-mp-palco] { display: flex; flex-direction: column; gap: 10px; }
[data-mp-titulo] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--tam-titulo, 26px); font-weight: 700; padding: 2px 4px 0; }
[data-mp-sub] { color: var(--ink2); font-size: var(--tam-sub); padding: 0 4px; margin-top: -4px; }
[data-mp-sub] b { color: var(--ink); }
[data-mp-outra] { width: auto; align-self: flex-end; min-height: 44px; padding: 4px 8px; background: transparent; color: var(--azul); font-weight: 500; font-size: var(--tam-sub); margin-top: -8px; }
[data-mp-dica] { color: var(--ink2); font-size: var(--tam-rodape); padding: 0 4px; }
[data-mp-foto] { background: var(--panel); border-radius: var(--raio); padding: 6px; text-align: center; }
[data-mp-foto-quadro] { position: relative; display: inline-block; max-width: 100%; line-height: 0; vertical-align: top; }
[data-mp-foto-quadro] > img { display: block; max-width: 100%; max-height: 24vh; width: auto; height: auto; border-radius: 8px; }
[data-mp-balao] { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(244,247,251,.92); color: var(--bg); font-weight: 800; font-size: 15px; line-height: 26px; text-align: center; border: 2px solid var(--bg); box-shadow: 0 1px 5px rgba(0,0,0,.55); cursor: pointer; z-index: 1; user-select: none; -webkit-user-select: none; }
[data-mp-balao]::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; }
[data-mp-balao][data-mp-balao-estado="ativo"] { width: 42px; height: 42px; line-height: 38px; font-size: 20px; background: var(--azul); color: var(--texto-sobre-azul); z-index: 3; box-shadow: 0 0 0 5px rgba(90,176,255,.35), 0 1px 5px rgba(0,0,0,.55); }
[data-mp-balao][data-mp-balao-estado="ok"] { background: var(--verde); color: var(--texto-sobre-verde); }
[data-mp-balao][data-mp-balao-estado="ruim"] { background: var(--vermelho); color: #fff; }
[data-mp-cotas] { display: flex; flex-direction: column; gap: 8px; }
[data-mp-cota] { scroll-margin: 12px; background: var(--panel); border-radius: var(--raio); padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 8px; border: 2px solid transparent; }
[data-mp-cota][data-mp-foco] { border-color: var(--azul); background: var(--panel2); }
[data-mp-cota][data-mp-resultado="ruim"] { border-color: var(--vermelho); }
[data-mp-cota-topo] { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
[data-mp-cota-nome] { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; }
[data-mp-cota-nome] > span:last-child { display: flex; flex-direction: column; min-width: 0; }
[data-mp-cota-nome] small { font-size: 13px; color: var(--ink2); font-weight: 400; }
[data-mp-num] { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; background: rgba(244,247,251,.92); color: var(--bg); }
[data-mp-num][data-mp-balao-estado="ativo"] { background: var(--azul); color: var(--texto-sobre-azul); }
[data-mp-num][data-mp-balao-estado="ok"] { background: var(--verde); color: var(--texto-sobre-verde); }
[data-mp-num][data-mp-balao-estado="ruim"] { background: var(--vermelho); color: #fff; }
[data-mp-valor] { width: auto; min-width: 140px; min-height: 64px; font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--bg); letter-spacing: .02em; }
[data-mp-valor][data-mp-vazio] { color: var(--ink3); }
[data-mp-valor][data-valor="ok"] { color: var(--verde); }
[data-mp-valor][data-valor="ruim"] { color: var(--vermelho); }
[data-mp-casas] { display: flex; gap: 8px; align-items: center; }
[data-mp-casas] > button { width: auto; min-width: 84px; min-height: 60px; font-size: 22px; background: var(--bg); }
[data-mp-casas] > button[data-marcado] { background: var(--azul); color: var(--texto-sobre-azul); }
[data-mp-teclado] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
[data-mp-teclado] > button { min-height: 64px; font-size: 27px; font-weight: 500; background: var(--bg); }
[data-mp-teclado] > button[data-mp-tecla-texto] { font-size: 14px; font-weight: 700; line-height: 1.15; padding: 6px; }
[data-mp-pn] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-mp-pn] > button { min-height: 64px; background: var(--bg); }
[data-mp-pn] > button[data-marcado="SIM"] { background: var(--verde); color: var(--texto-sobre-verde); }
[data-mp-pn] > button[data-marcado="NAO"] { background: var(--vermelho); color: #fff; }
[data-mp-par] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-mp-par] > button:not([data-cor-perigo]) { background: var(--bg); border: 2px solid var(--line); }
[data-mp-opcoes] { display: flex; flex-direction: column; gap: 10px; }
[data-mp-opcoes] > button { min-height: 96px; font-size: 20px; justify-content: flex-start; text-align: left; padding: 12px 20px; }
[data-mp-opcoes] > button[data-mp-opcao="medir"] { background: var(--verde); color: var(--texto-sobre-verde); }
[data-mp-comprovante] { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; text-align: center; background: transparent; min-height: 60vh; justify-content: center; font-weight: 400; }
[data-mp-selo] { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 800; background: var(--verde); color: var(--texto-sobre-verde); }
[data-mp-comprovante="vermelho"] [data-mp-selo] { background: var(--vermelho); color: #fff; }
[data-mp-comprovante="pausa"] [data-mp-selo] { background: var(--amarelo); color: var(--texto-sobre-amarelo); }
[data-mp-comp-titulo] { font-size: var(--tam-titulo, 26px); font-weight: 700; }
[data-mp-comprovante="vermelho"] [data-mp-comp-titulo] { color: var(--vermelho); }
[data-mp-comp-linha] { font-size: var(--tam-corpo); color: var(--ink2); }
[data-mp-comp-valores] { font-size: var(--tam-sub); color: var(--ink); }
[data-mp-comp-corrigir] { width: auto; min-width: 200px; background: transparent; border: 2px solid var(--line); }
[data-mp-volta] { width: 70%; height: 6px; border-radius: 3px; background: var(--panel2); overflow: hidden; }
[data-mp-volta] > i { display: block; height: 100%; width: 0; background: var(--verde); animation: mp-volta 4s linear forwards; }
[data-mp-comprovante="vermelho"] [data-mp-volta] > i { background: var(--vermelho); animation-duration: 5s; }
@keyframes mp-volta { from { width: 0; } to { width: 100%; } }
[data-mp-cfg-ativo] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-mp-cfg-ativo] > button[data-marcado] { background: var(--azul); color: var(--texto-sobre-azul); }
[data-mp-cfg-grade] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
[data-mp-cfg-grade] > button { flex-direction: column; gap: 2px; min-height: 64px; font-size: var(--tam-sub); }
[data-mp-cfg-grade] > button[data-marcado] { background: var(--azul); color: var(--texto-sobre-azul); }
[data-mp-cfg-outro] { font-size: 12px; font-weight: 600; color: var(--amarelo); }
[data-mp-cfg-grade] > button[data-marcado] [data-mp-cfg-outro] { color: var(--texto-sobre-azul); }
[data-mp-cfg-salvar]:disabled { opacity: .4; }

/* MEDIR APÓS PAUSA e MEDIDA ERRADA (dono, 07/10) */
[data-mp-solicitada] { font-size: var(--tam-sub); font-weight: 700; color: var(--vermelho); text-transform: uppercase; letter-spacing: .04em; padding: 2px 4px 0; }
[data-mp-medida-errada] { background: var(--vermelho); color: #fff; border-radius: var(--raio); min-height: 70vh; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
[data-mp-errada-titulo] { font-size: 44px; font-weight: 800; letter-spacing: .02em; line-height: 1.1; }
[data-mp-errada-separe] { font-size: 26px; font-weight: 800; }
[data-mp-errada-medida] { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
[data-mp-medida-errada] [data-mp-errada-faixa] { background: #fff; color: #7A1A14; width: 100%; box-sizing: border-box; }
[data-mp-medida-errada] [data-mp-errada-faixa] * { color: #7A1A14; }
[data-mp-entendi] { background: #fff; color: #7A1A14; min-height: 96px; font-size: 28px; font-weight: 800; max-width: 420px; }

/* INSTRUMENTOS (dono, 07/10): "Instrumentos:" abaixo da foto, um botão por tipo; lista de códigos do tipo */
[data-mp-instrumentos] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 2px; }
[data-mp-instr-rotulo] { font-size: var(--tam-rodape); color: var(--ink2); text-transform: uppercase; letter-spacing: .04em; }
[data-mp-instr-tipo] { width: auto; flex: 0 1 auto; margin: 0; min-height: 56px; padding: 6px 14px; font-size: var(--tam-sub); flex-direction: column; gap: 0; background: var(--panel2); }
[data-mp-instr-tipo][data-mp-instr-vazio] { border: 2px dashed var(--amarelo); color: var(--amarelo); }
[data-mp-instr-vencido] { font-size: 12px; font-weight: 700; color: #fff; background: var(--vermelho); border-radius: 6px; padding: 1px 6px; }
[data-mp-instr-lista] { display: flex; flex-direction: column; gap: 10px; }
[data-mp-instr-lista] > button { min-height: 84px; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
[data-mp-instr-lista] > button > b { font-size: 26px; }
[data-mp-instr-lista] > button > small { font-size: 14px; color: var(--ink2); font-weight: 400; }
[data-mp-instr-lista] > button > small[data-mp-instr-vencido] { color: #fff; font-weight: 700; }
[data-mp-instr-lista] > button[data-marcado] { background: var(--azul); color: var(--texto-sobre-azul); }
[data-mp-instr-lista] > button[data-marcado] > small { color: var(--texto-sobre-azul); }
/* 07/10 (dono): "Sim · o Anilton levou agora" é a exceção -- chip discreto (texto menor, sem borda forte) */
[data-afi-chip="discreto"] { min-height: 44px; border-width: 1px; border-style: dashed; background: transparent; color: var(--ink3); font-weight: 500; font-size: var(--tam-rodape); }
[data-afi-chip="discreto"][aria-pressed="true"] { border-style: solid; border-color: var(--verde); background: var(--verde-claro); color: var(--ink); }

/* CONTROLE DE TOCOS (dono, 08/10; maquete claude.ai/artifact/4KUVwDsKSDTrEwZ1LdQv1g) -- telas/inspecao-linha.js.
   Prefixo `data-tc-*`. Contagem cega; relatório com BATE (verde) / NÃO BATE (vermelho); aviso amarelo de
   sessão aberta. */
[data-tc-tornos] > * + * { border-top: 1px solid var(--line); }
[data-tc-torno] { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: transparent; border: 0; color: var(--ink); font: inherit; min-height: var(--alvo-min-px); padding: 12px 16px; margin: 0; border-radius: 0; }
[data-tc-torno][data-marcado] { background: var(--azul-claro); box-shadow: inset 0 0 0 2px var(--azul); }
[data-tc-marca] { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--ink3); display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; }
[data-tc-torno][data-marcado] [data-tc-marca] { background: var(--azul); border-color: var(--azul); color: var(--texto-sobre-azul); }
[data-tc-torno][data-marcado] [data-tc-marca]::after { content: '✓'; }
[data-tc-contar]:disabled, [data-tc-confirmar]:disabled { opacity: .4; }
[data-tc-tipo] { background: var(--panel); border-radius: var(--raio); padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
[data-tc-tipo] > b { font-size: 22px; font-weight: 700; }
[data-tc-tipo] > span { color: var(--ink2); font-size: var(--tam-corpo); }
[data-tc-tipo] > small { color: var(--ink3); font-size: var(--tam-rodape); }
[data-tc-outro] { background: transparent; border: 1.5px dashed var(--ink3); color: var(--azul); font-weight: 600; min-height: var(--alvo-min-px); border-radius: var(--raio); }
[data-tc-rel] { background: var(--panel); border-radius: var(--raio); overflow: hidden; }
[data-tc-rel="bate"] { box-shadow: inset 0 0 0 2px var(--verde); }
[data-tc-rel="nao-bate"] { box-shadow: inset 0 0 0 2px var(--vermelho); }
[data-tc-rel-cab] { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: var(--tam-corpo); }
[data-tc-selo] { font-size: var(--tam-rodape); font-weight: 800; letter-spacing: .04em; border-radius: 6px; padding: 3px 8px; }
[data-tc-selo][data-valor="ok"] { background: var(--verde); color: var(--texto-sobre-verde, #06301a); }
[data-tc-selo][data-valor="ruim"] { background: var(--vermelho); color: #fff; }
[data-tc-rel-linha] { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px 48px; gap: 6px; align-items: start; padding: 8px 16px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
[data-tc-rel-linha] > :not(:first-child) { text-align: right; }
[data-tc-rel-linha="cab"] { color: var(--ink3); font-size: var(--tam-rodape); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; padding-block: 4px; }
[data-tc-rel-linha] > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-tc-rel-linha] > span:first-child > small { color: var(--ink2); font-size: var(--tam-rodape); }
[data-tc-rel-linha] > b { font-size: var(--tam-corpo); }
[data-tc-rel-linha] [data-valor="ruim"] { color: var(--vermelho); }
[data-tc-rel-linha] [data-valor="ok"] { color: var(--verde); }
[data-tc-rel-aviso] { padding: 8px 16px 10px; border-top: 1px solid var(--line); color: var(--amarelo); font-size: var(--tam-rodape); }
[data-tc-avise] { color: var(--amarelo); text-align: center; font-weight: 600; }
[data-tc-inicio] { background: var(--panel); border: 0; color: var(--ink); font-weight: 700; min-height: 60px; border-radius: var(--raio); }

/* INSPEÇÃO DE MEDIDAS (dono, 09/10; maquete claude.ai/artifact/CH2GyLJkM5C1UPa9ieGxyL) -- telas/inspecao-linha.js.
   Prefixo `data-im-*` (a escolha de máquinas reaproveita a marca `data-tc-marca` do controle de tocos). */
[data-im-lista] { display: flex; flex-direction: column; gap: 6px; }
[data-im-lista] > [data-grupo] > * + * { border-top: 1px solid var(--line); }
[data-im-linha] { display: flex; flex-direction: column; }
[data-im-maquina] { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: transparent; border: 0; color: var(--ink); font: inherit; min-height: var(--alvo-min-px); padding: 12px 16px; margin: 0; border-radius: 0; }
[data-im-maquina][data-marcado] { background: var(--azul-claro); box-shadow: inset 0 0 0 2px var(--azul); }
[data-im-maquina][data-marcado] [data-tc-marca] { background: var(--azul); border-color: var(--azul); color: var(--texto-sobre-azul); }
[data-im-maquina][data-marcado] [data-tc-marca]::after { content: '✓'; }
[data-im-maquina]:disabled { opacity: .5; }
[data-im-pendente] { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 0; margin: 0; border-radius: 0; padding: 10px 16px 10px 56px; background: var(--vermelho-claro, rgba(255,90,78,.16)); color: var(--vermelho); font: inherit; min-height: 56px; }
[data-im-pendente] > b { font-size: var(--tam-rodape); }
[data-im-pendente] > small { color: var(--ink2); font-size: var(--tam-rodape); }
[data-im-pendente-acao] { font-weight: 700; font-size: var(--tam-rodape); text-decoration: underline; }
[data-im-seguir]:disabled { opacity: .4; }
[data-im-pegar] { background: var(--panel); border-radius: var(--raio); padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
[data-im-pegar] > b { font-size: 22px; }
[data-im-pegar] > small { color: var(--ink2); font-size: var(--tam-sub); }
[data-im-caixa-verde] { width: 140px; height: 80px; border-radius: 12px; background: rgba(52,199,89,.22); border: 3px solid var(--verde); position: relative; }
[data-im-caixa-verde]::after { content: ''; position: absolute; left: 58px; top: -18px; width: 20px; height: 44px; border-radius: 5px; background: var(--azul); }
[data-im-pular] { background: transparent; border: 1.5px dashed var(--ink3); color: var(--ink2); font-weight: 600; min-height: 56px; border-radius: var(--raio); }
[data-im-medicao] { display: flex; flex-direction: column; }
[data-im-vermelha] { background: var(--vermelho); color: #fff; border-radius: 16px; padding: 22px 16px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
[data-im-vermelha-titulo] { font-size: 28px; font-weight: 800; line-height: 1.15; }
[data-im-vermelha-cota] { background: rgba(0,0,0,.18); border-radius: 10px; padding: 10px; font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--tam-corpo); }
[data-im-vermelha-texto] { font-size: var(--tam-corpo); }
[data-im-chamei] { background: #fff; color: #7a0d07; border: 0; min-height: 68px; border-radius: 14px; font-weight: 800; font-size: var(--tam-corpo); }
[data-im-depois] { background: transparent; border: 1.5px solid var(--ink2); color: var(--ink); min-height: 60px; border-radius: 14px; font-weight: 700; }
[data-im-retornos] [data-im-retorno-depois] { background: rgba(255,204,77,.08); }
/* ROTA SEM FINALIZAR (dono, 08/10) -- faixa vermelha da entrada da Inspeção (componentes/aviso-rota.js,
   `data-aviso-rota-*`; dono, 08/10: "apenas dentro do menu de inspeção", nunca no repouso) e a tela de
   finalizar com desfecho (expedicao-entrega.js, `data-entrega-final-*`). Vermelho = falta (§1.5); pisca
   enquanto houver rota atrasada (sem animação com movimento reduzido). */
[data-aviso-rota] { width: 100%; min-height: 104px; display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 12px; padding: 12px 16px; margin-bottom: 8px; background: var(--vermelho-claro); color: var(--vermelho); border: 3px solid var(--vermelho); border-radius: var(--raio); font-weight: 700; animation: rota-pisca 1s ease-in-out infinite; }
[data-aviso-rota-corpo] { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-aviso-rota-titulo] { font-size: var(--tam-titulo); letter-spacing: .02em; }
[data-aviso-rota-detalhe] { font-size: var(--tam-sub); font-weight: 500; color: var(--ink); }
[data-aviso-rota-numero] { font-size: var(--tam-numero-2); font-weight: 700; line-height: 1; text-align: center; }
[data-aviso-rota-numero] > small { display: block; font-size: var(--tam-rodape); font-weight: 500; }
@keyframes rota-pisca { 0%, 100% { background-color: var(--vermelho-claro); } 50% { background-color: rgba(255,90,78,.45); } }
@media (prefers-reduced-motion: reduce) { [data-aviso-rota] { animation: none; background-color: rgba(255,90,78,.30); } }
[data-entrega-final-linha] { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
[data-entrega-final-linha] > span { display: flex; flex-direction: column; gap: 2px; }
[data-entrega-final-linha] > span > small { color: var(--ink2); font-size: var(--tam-sub); }
[data-entrega-final-botoes] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-entrega-final-botoes] > button { min-height: 64px; background: var(--panel2); font-size: var(--tam-sub); }
[data-entrega-final-botoes] > button[data-marcado="ENTREGUE"] { background: var(--verde); color: var(--texto-sobre-verde, #fff); }
[data-entrega-final-botoes] > button[data-marcado="NAO_ENTREGUE"] { background: var(--vermelho); color: #fff; }
/* setup da prensa v2 (13/10) -- telas/setup-ferramentas.js, a troca na prensa "amarrada como o torno"
   (spec-v2-1310.md §4): "Como saiu?" / "Como está?" com Boa (verde) · Média (amarelo) · Ruim (vermelho) -- a cor
   aparece também sem marcar; a nota "Ruim · conferir antes de usar" em vermelho; o "Falta dizer como saiu / como
   está / onde guardou" em amarelo (como o da T11); e o passo "cadastrar" (nome, tipo, peça, onde fica guardada). */
[data-prensa-troca], [data-prensa-mapa], [data-prensa-incluir-tela], [data-prensa-cadastrar-tela] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-prensa-troca] [data-grupo-linha] { align-items: flex-start; }
[data-chip][data-prensa-avaliacao="B"]:not([aria-pressed="true"]) { color: var(--verde); }
[data-chip][data-prensa-avaliacao="R"]:not([aria-pressed="true"]) { color: var(--vermelho); }
[data-chip][data-prensa-avaliacao] { min-width: 88px; justify-content: center; }
[data-prensa-condicao] > small { min-width: 84px; }
/* "Para onde vai?" numa linha própria: os destinos começam embaixo dele */
[data-prensa-saida] > [data-ferr-chips]:last-child > small { flex-basis: 100%; }
[data-grupo-linha] > small[data-prensa-nota-ruim] { flex-basis: 100%; color: var(--vermelho); font-weight: 700; }
[data-ficha-cinza][data-prensa-falta-condicao], [data-ficha-cinza][data-prensa-falta-dizer], [data-ficha-cinza][data-prensa-cadastrar-falta] { color: var(--amarelo); font-weight: 700; }
button[data-prensa-cadastrar] > span > span:first-child, button[data-prensa-incluir] > span > span:first-child { color: var(--azul); font-weight: 700; }
[data-prensa-cadastrar-tela] [data-ferr-campo-texto] input { text-transform: none; }
[data-prensa-cadastrar-mapa] { display: flex; flex-direction: column; gap: 8px; }
[data-ferr-caixa][data-prensa-cadastrar-celula][data-atual], [data-ferr-caixa][data-prensa-celula][data-atual] { background: var(--azul-claro); }

/* armário da prensa v2 (13/10) -- inventário (telas/ferramentas.js; spec-v2-1310.md §5): a condição de agora no
   subtítulo (`data-ferr-condicao` B|M|R; Ruim em vermelho pelo [data-valor="ruim"] comum), o "↩ Voltou do
   conserto" na linha da ferramenta da Manutenção e a tela dele (chips Boa · Média · Ruim + o mapa "Onde
   guardar?": a célula escolhida em verde, a sugestão diz "guardava aqui"). */
[data-ferr-condicao="R"] { font-weight: 700; }
button[data-ferr-voltou] { min-height: 48px; font-size: var(--tam-rodape); }
[data-ferr-voltou-mapa] { display: flex; flex-direction: column; gap: 8px; }
[data-ferr-voltou-mapa] [data-ferr-caixa][aria-pressed="true"] { border-color: var(--verde); background: var(--verde-claro); }
[data-ferr-voltou-mapa] [data-ferr-caixa][data-sugerida] [data-ferr-caixa-conta] { color: var(--verde); font-weight: 700; }
[data-ficha-cinza][data-ferr-voltou-falta] { color: var(--amarelo); font-weight: 700; }

/* SOBRA DA INSPEÇÃO (dono, 10/10; maquetes sobra2 y02..y09) -- telas/inspecionadas.js e qualidade.js
   (`data-sobra-*`, `data-aviso-laranja`), a faixa do Confira da expedição e a tela "Sobrou" em laranja.
   LARANJA = sobra. O cartão ✅ INSPECIONADAS com sobra parada há 12 h ou mais pisca em VERMELHO com a
   MESMA animação do aviso de medir peça (mp-pisca-vermelho, Medição da peça 07/10). */
[data-valor="laranja"] { color: var(--laranja); }
[data-faixa="SOBRA"] { background: var(--laranja-claro); color: var(--laranja); border: 0; }
[data-sobra-cartoes] { display: flex; flex-direction: column; gap: var(--espaco); margin-bottom: 4px; }
[data-cartao][data-laranja] { outline: 3px solid var(--laranja); outline-offset: 2px; }
[data-cartao][data-laranja] [data-expedicao-cartao-valor] { color: var(--laranja); }
[data-cartao][data-discreto] { opacity: .6; }
[data-cartao][data-sobra-alerta="vermelho"] { outline: 3px solid var(--vermelho); outline-offset: 2px; background: var(--panel2); animation: mp-pisca-vermelho 1s ease-in-out infinite; }
[data-cartao][data-sobra-alerta="vermelho"] [data-cartao-corpo] small { color: var(--vermelho); font-weight: 700; }
[data-cartao][data-sobra-alerta="vermelho"] [data-expedicao-cartao-valor] { color: var(--vermelho); }
@media (prefers-reduced-motion: reduce) { [data-cartao][data-sobra-alerta="vermelho"] { animation: none; background-color: rgba(255,90,78,.30); } }
[data-sobra-tela] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-sobra-tag] { display: inline-block; align-self: flex-start; width: auto; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--verde-claro); color: var(--verde); }
[data-sobra-op] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: 12px; }
[data-sobra-op] > span:first-child { flex: 1 1 auto; min-width: 0; }
[data-sobra-op][data-com-botao] { flex-wrap: wrap; }
[data-sobra-num] { font-size: var(--tam-numero-2); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-sobra-num][data-valor="cinza"] { font-size: var(--tam-sub); }
[data-sobra-op] > button[data-laranja-cheio] { flex: 1 0 100%; margin-top: 4px; }
button[data-laranja-cheio] { background: var(--laranja); color: var(--texto-sobre-laranja); border: 0; border-radius: var(--raio-botao); min-height: 64px; font-weight: 700; font-size: 20px; padding: 10px 16px; width: 100%; }
[data-sobra-escrevi] { display: flex; flex-direction: row; align-items: center; gap: 10px; }
[data-sobra-escrevi] > span:first-child { flex: 1; min-width: 0; }
[data-sobra-confira-aviso]:empty { display: none; }
[data-sobra-caixa] { margin: 4px 0; padding: 18px 12px 14px; border-radius: 14px; background: #c9a26b; color: #1d1408; text-align: center; }
[data-sobra-caixa] small { display: block; font: 600 14px/1.2 var(--fonte); color: #4a3517; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
[data-sobra-caixa] b { display: block; white-space: nowrap; font: 700 37px/1.05 "Segoe Print", "Comic Sans MS", cursive; letter-spacing: .02em; }
[data-sobra-caixa="feita"] b { font-size: 34px; }
/* ✅ Inspecionadas em PARTES (dono, 10/10): "com sobra" laranja no topo; "incompletas" tocáveis (›);
   "sem peça para transferir" recolhido (<details>), só leitura. */
[data-sobra-parte-titulo="sobra"] { color: var(--laranja); font-weight: 700; }
[data-grupo][data-sobra-parte="sobra"] { box-shadow: inset 0 0 0 2px var(--laranja); }
button[data-sobra-op] { text-align: left; color: inherit; }
button[data-sobra-op] > [data-chevron] { font-size: 22px; line-height: 1; }
[data-sobra-parte-recolhida] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-sobra-parte-recolhida] > summary { cursor: pointer; list-style: none; min-height: var(--alvo-min-px); display: flex; align-items: center; }
[data-sobra-parte-recolhida] > summary::-webkit-details-marker { display: none; }
[data-sobra-parte-recolhida] > summary::after { content: '›'; margin-left: 8px; font-size: 20px; transition: transform .15s; }
[data-sobra-parte-recolhida][open] > summary::after { transform: rotate(90deg); }
[data-grupo][data-sobra-parte="sem-peca"] { opacity: .75; }
/* y02: o aviso laranja grande (quase a tela inteira) do fim da inspeção */
[data-aviso-laranja] { background: var(--laranja); color: var(--texto-sobre-laranja); border-radius: 18px; min-height: 70vh; box-sizing: border-box; padding: 28px 24px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
[data-aviso-laranja] [data-aviso-palavra] { font: 800 18px/1 var(--fonte); letter-spacing: .1em; }
[data-aviso-laranja] h2 { margin: 6px 0 0; font: 800 36px/1.1 var(--fonte); color: var(--texto-sobre-laranja); }
[data-aviso-laranja] [data-aviso-numero] { font: 900 150px/1 var(--fonte); font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin: 14px 0 2px; }
[data-aviso-laranja] [data-aviso-unidade] { font: 700 20px/1 var(--fonte); margin-bottom: 20px; opacity: .8; }
[data-aviso-laranja] p { margin: 0; font: 700 24px/1.25 var(--fonte); max-width: 640px; }
[data-aviso-laranja] p + p { font-weight: 600; font-size: 20px; padding-top: 14px; border-top: 2px solid rgba(43, 23, 0, .25); margin-top: 14px; }
[data-aviso-laranja] [data-aviso-espaco] { flex: 1 1 auto; }
[data-aviso-laranja] button { width: 100%; min-height: 84px; border: 0; border-radius: var(--raio-botao); background: var(--texto-sobre-laranja); color: #fff; font: 800 28px/1 var(--fonte); }
/* "Sobrou" da expedição em laranja (dono, 10/10: "só mudar cor") */
[data-sobra-laranja] > h2, [data-sobra-laranja] [data-ficha-pergunta] h2 { color: var(--laranja); }
[data-sobra-laranja] [data-teclado-valor] { outline: 2px solid var(--laranja); }
[data-sobra-laranja] [data-teclado-confirmar] { background: var(--laranja); color: var(--texto-sobre-laranja); border: 0; }
/* ===================================================================== AJUSTE DE MÁQUINA (dono, 10/10)
   Cartão dividido na faixa de medição do repouso (repouso.js) e a tela 🔧 Ajuste (telas/ajuste-maquina.js).
   Prefixos `data-mp-dividida`/`data-mp-ajuste*` e `data-aj-*`. Cor do ajuste = AMARELO (pendente, para o
   preparador) -- as quatro cores com significado do contrato visual; o laranja da maquete virou amarelo. */
[data-mp-dividida] { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 0; border-radius: var(--raio); overflow: hidden; border: 2px solid var(--amarelo); }
[data-mp-dividida] > button[data-mp-maquina] { border-radius: 0; border: 0; min-height: 96px; }
[data-mp-ajuste] { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 96px; padding: 8px 12px; border-radius: 0; border: 0; border-left: 2px dashed var(--amarelo); background: var(--amarelo-claro); color: var(--ink); text-align: left; font-weight: 400; }
[data-mp-ajuste-titulo] { font-size: 15px; font-weight: 800; color: var(--amarelo); }
[data-mp-ajuste-valor] { font-size: 26px; font-weight: 900; color: var(--amarelo); line-height: 1.1; font-variant-numeric: tabular-nums; }
[data-mp-ajuste] > small { font-size: 13px; color: var(--ink2); }
[data-mp-chip="ajuste"] { background: var(--amarelo-claro); color: var(--amarelo); }
[data-mp-lista] button[data-mp-maquina][data-mp-estado="CONFIRMAR_AJUSTE"] { box-shadow: inset 6px 0 0 var(--vermelho); border: 2px solid var(--vermelho); }
[data-mp-lista] button[data-mp-maquina][data-mp-estado="CONFIRMAR_AJUSTE"] [data-mp-estado-texto] { color: var(--vermelho); font-weight: 700; }

[data-aj-abas] { display: flex; gap: 8px; flex-wrap: wrap; }
[data-aj-aba] { width: auto; min-height: 48px; padding: 6px 14px; background: var(--panel2); font-size: var(--tam-sub); }
[data-aj-aba][data-marcado] { background: var(--amarelo); color: var(--texto-sobre-amarelo); }
[data-aj-bloco], [data-aj-pedido] { background: var(--panel); border-radius: var(--raio); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
[data-aj-pedido] { border: 2px solid var(--amarelo); background: var(--amarelo-claro); }
[data-aj-cota] { font-size: 20px; font-weight: 800; }
[data-aj-tol], [data-aj-legenda], [data-aj-detalhe] { font-size: var(--tam-rodape); color: var(--ink2); }
[data-aj-rotulo] { font-size: var(--tam-rodape); color: var(--ink2); text-transform: uppercase; letter-spacing: .05em; }
[data-aj-grande] { font-size: 40px; font-weight: 900; color: var(--amarelo); line-height: 1.1; font-variant-numeric: tabular-nums; }
[data-aj-grafico] { width: 100%; height: auto; display: block; }
[data-aj-grafico] [data-aj-faixa] { fill: var(--verde-claro); }
[data-aj-grafico] [data-aj-linha="lim"] { stroke: var(--verde); stroke-width: 2; }
[data-aj-grafico] [data-aj-linha="alvo"] { stroke: var(--ink2); stroke-width: 1.4; stroke-dasharray: 5 4; }
[data-aj-grafico] [data-aj-eixo] { fill: var(--ink2); font-size: 11px; font-family: inherit; }
[data-aj-grafico] [data-aj-hora] { fill: var(--ink3); font-size: 10px; font-family: inherit; }
[data-aj-grafico] [data-aj-trilha] { fill: none; stroke: var(--ink2); stroke-width: 1.2; opacity: .6; }
[data-aj-grafico] circle { fill: var(--ink); }
[data-aj-grafico] circle[data-aj-ponto="borda"] { fill: var(--amarelo); stroke: var(--texto-sobre-amarelo); stroke-width: 1.5; }
[data-aj-pergunta] { font-size: var(--tam-corpo); font-weight: 700; }
[data-aj-opcoes] { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-aj-acao] { min-height: 64px; background: var(--panel2); font-size: var(--tam-sub); }
[data-aj-acao][data-marcado] { background: var(--azul-claro); border: 2px solid var(--azul); }
[data-aj-campo] { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 14px; border-radius: var(--raio); border: 2px solid var(--azul); background: var(--panel2); }
[data-aj-valor] { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
[data-aj-sugestao] { font-size: 14px; color: var(--ink3); }
[data-aj-teclado] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
[data-aj-tecla] { min-height: 64px; font-size: 26px; font-weight: 700; background: var(--panel2); }
[data-aj-tecla][data-aj-tecla="sinal"], [data-aj-tecla="apagar"] { font-size: 20px; }
[data-aj-rodape] { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 4px; }
[data-aj-nao-precisa] { min-height: 72px; background: transparent; border: 2px solid var(--ink3); }
[data-aj-feito] { min-height: 72px; }
[data-mp-comprovante="ajuste"] [data-mp-selo] { background: var(--amarelo); color: var(--texto-sobre-amarelo); }
[data-aj-motivos] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
[data-aj-motivo] { min-height: 88px; background: var(--panel2); font-size: var(--tam-corpo); }

/* ===================================================================================== CONTAGEM DA INSPEÇÃO
   (dono, 14/10; src/ui/telas/contagem-inspecao.js): ✅/📋 por peça, a peça aberta por OP, a contagem da
   liderança (somar caixa por caixa, distribuir pelo balde, Confira). Linhas no padrão das listas da sobra. */
[data-contagem-tela] { display: flex; flex-direction: column; gap: var(--espaco); }
[data-contagem-linha] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: 12px; text-align: left; color: inherit; }
[data-contagem-linha] > span:first-child { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
[data-contagem-linha] > span:first-child > small { display: block; }
[data-contagem-linha] > [data-chevron] { font-size: 22px; line-height: 1; }
[data-contagem-tag] { display: inline-block; align-self: flex-start; width: auto; margin-top: 2px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(90, 176, 255, .16); color: var(--azul); }
[data-contagem-tag="sobra"] { background: var(--laranja-claro); color: var(--laranja); }
[data-contagem-tag="parado"] { background: var(--panel2); color: var(--ink2); }
[data-contagem-num][data-valor="laranja"] { color: var(--laranja); }
[data-contagem-acoes] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco); }
[data-contagem-acoes] > button { min-height: 76px; }
[data-contagem-segmento] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: var(--raio-botao); background: var(--panel2); }
[data-contagem-segmento] > button { min-height: var(--alvo-min-px); border: 0; border-radius: var(--raio-pequeno); background: transparent; color: var(--ink2); font: 700 var(--tam-rodape)/1.15 var(--fonte); }
[data-contagem-segmento] > button[data-selecionado] { background: var(--azul); color: var(--texto-sobre-azul); }
[data-contagem-qtd] { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
[data-contagem-qtd] > small { font-size: var(--tam-rodape); color: var(--ink2); }
[data-contagem-editar] { flex: 0 0 auto; width: auto; padding: 0; min-width: var(--alvo-min-px); min-height: var(--alvo-min-px); border-radius: var(--raio-pequeno); border: 2px solid var(--line); background: transparent; color: var(--azul); font: 700 22px/1 var(--fonte); }
[data-contagem-parciais] { text-align: right; font-variant-numeric: tabular-nums; }
[data-contagem-busca] { min-height: var(--alvo-min-px); border-radius: var(--raio-botao); border: 2px solid var(--azul); background: var(--panel2); color: var(--ink); font: 700 var(--tam-numero-2)/1 var(--fonte); padding: 0 16px; }
[data-contagem-fica] { display: flex !important; flex-direction: row !important; justify-content: space-between; align-items: center; gap: 12px; }
[data-contagem-fica] > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-contagem-quem] { font-weight: 600; }
/* ⌂ Início (dono, 15/10): ao lado do "↻ Sincronizar agora", leva ao menu inicial de qualquer tela. */
[data-indicador-rede-acoes] { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
[data-indicador-rede-inicio] { width: auto; flex: 0 0 auto; min-height: 52px; height: auto; padding: 6px 18px; font-size: var(--tam-rodape); font-weight: 700; background: var(--panel2); color: var(--ink); border-radius: var(--raio-pequeno); }
[data-indicador-rede-inicio][hidden] { display: none; }
/* 🔀 Redistribuir (15/10): embaixo dos dois botões da peça, a largura toda. */
[data-contagem-acoes] > [data-largura-toda] { grid-column: 1 / -1; min-height: 64px; }