/* =========================================================
   ARMAZÉM INTELIGENTE — peças do PDA
   Os seis componentes do sistema (03 §5) e as peças pequenas que
   os ecrãs repetem. Nenhuma escreve uma cor: todas apontam para
   um valor de tokens.css.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--f-base); color: var(--c-texto); }
p, h1, h2, h3 { margin: 0; }
code { font-family: var(--f-mono); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--e-lg); top: var(--e-lg); z-index: 99; background: var(--c-cartao); padding: var(--e-md); }

/* ---------- o ecrã do aparelho ---------- */
.pda {
  position: relative;
  width: var(--ecra-l); height: var(--ecra-a);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-fundo); color: var(--c-texto);
  font-family: var(--f-base); font-size: var(--t-body); line-height: 1.3;
}

.corpo  { flex: 1; min-height: 0; padding: var(--e-md) var(--e-lg); display: flex; flex-direction: column; gap: var(--e-sm); overflow: hidden; }
.rodape { padding: var(--e-sm) var(--e-lg) var(--e-lg); display: flex; flex-direction: column; gap: var(--e-md); }

/* ---------- Faixa: quem é e se há rede, sempre no mesmo sítio ---------- */
.faixa {
  display: flex; align-items: center; gap: var(--e-md); flex: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: var(--e-md) var(--e-lg);
  background: var(--c-invertido); color: var(--c-sobre-marca);
  font-size: var(--t-small);
}
.faixa__icone   { width: 20px; height: 18px; flex: none; }   /* o símbolo da app, ver img/simbolo-app.svg */
.faixa__divisor { width: 2px; height: 16px; background: var(--c-acao); flex: none; }
.faixa__perfil  { font-size: var(--t-tiny); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.faixa__nome    { margin-left: auto; font-weight: 700; }
.faixa__rede    { display: flex; align-items: center; gap: var(--e-sm); }
.faixa__ponto   { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--c-bom); }
/* Sem rede, a faixa não muda de cor: muda de palavra, e o ponto apaga-se.
   Vermelho sobre o invertido não se lê, e a cor sozinha não diz estado — 03 §2.3. */
.faixa__rede--sem { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: var(--t-tiny); }
.faixa__rede--sem .faixa__ponto { background: var(--c-cinzento); }

/* ---------- Voltar e chamar o gestor, em todos os ecrãs — 30 de setembro ----
   Não ganham linha própria: a faixa e o topo são a única barra do ecrã, e uma
   segunda linha tirava 48 dp ao corpo, que já está cheio. Na faixa, o «voltar»
   toma o lugar do símbolo da app — que fica nos ecrãs de início, de onde não
   se volta a lado nenhum — e o «chamar» o lugar do retrato, que dizia o que o
   nome ao lado já diz. Ocupam a mesma caixa de 24 dp que ocupavam, para a
   faixa não mudar de altura e não cortar o último botão dos ecrãs cheios; o
   alvo de toque cresce por fora, no ::after, e não empurra nada. */
.faixa__voltar, .faixa__chamar {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  border: 0; background: none; color: inherit;
}
.faixa__voltar::after, .faixa__chamar::after {
  content: ""; position: absolute; inset: calc(-1 * var(--e-md)) calc(-1 * var(--e-sm));
}
.faixa__voltar svg, .faixa__chamar svg, .topo__chamar svg { width: 20px; height: 20px; }

/* O fim do topo: a rede e o chamar, na mesma célula da grelha. */
.topo__fim { justify-self: end; display: flex; align-items: center; gap: var(--e-md); align-self: stretch; }
.topo__chamar {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 28px; min-height: var(--alvo); padding: 0;
  margin-right: calc(-1 * var(--e-sm));
  border: 0; background: none; color: inherit;
}

/* Ícones a duas cores: o traço é currentColor, e o realce é o laranja de
   ação. Num atributo de SVG um var() não se resolve; numa classe, sim. */
.tinta-acao { fill: var(--c-acao); }
.traco-acao { stroke: var(--c-acao); }

/* ---------- BarraDeTopo ---------- */
.barra { padding: var(--e-md) var(--e-lg); background: var(--c-cartao); border-bottom: 1px solid var(--c-cinzento); }
.barra__titulo { font-size: var(--t-lead); font-weight: 700; }
.barra__sub    { font-size: var(--t-tiny); color: var(--c-texto-3); margin-top: var(--e-xs); }

/* ---------- Passos da missão ---------- */
/* Os passos: um cartão com os números ligados por uma linha. O passo em que
   se está é o círculo cheio de acento; os feitos ficam ligados a acento. */
.passos {
  margin: var(--e-sm) var(--e-sm) 0; padding: var(--e-md) var(--e-lg);
  background: var(--c-cartao); border-radius: var(--r-md);
}
.passos__linha  { display: flex; justify-content: space-between; align-items: baseline; }
.passos__titulo { font-size: var(--t-body); font-weight: 700; color: var(--c-texto); }
.passos__conta  { font-size: var(--t-small); font-weight: 500; color: var(--c-texto-2); }
.passos__barra  { display: flex; align-items: center; margin-top: var(--e-sm); counter-reset: passo; }
.passos__traco  { flex: 1; display: flex; align-items: center; counter-increment: passo; }
.passos__traco:last-child { flex: none; }
.passos__traco::before {
  content: counter(passo); display: flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: var(--r-pill);
  background: var(--c-neutro-suave); color: var(--c-texto-2);
  font: 700 var(--t-small) var(--f-base); font-style: normal;
}
.passos__traco:not(:last-child)::after {
  content: ""; flex: 1; height: var(--espessura-progresso); margin: 0 var(--e-xs);
  border-radius: var(--r-pill); background: var(--c-neutro-suave);
}
.passos__traco--feito:has(+ .passos__traco--feito)::after { background: var(--c-acento); }
/* o passo em que se está: o último feito */
.passos__traco--feito:not(:has(+ .passos__traco--feito))::before { background: var(--c-acento); color: var(--c-sobre-marca); }

/* ---------- texto ---------- */
.ordem  { font-size: var(--t-giant); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; }
.ordem--menor { font-size: var(--t-huge); }
.codigo {
  font-size: var(--t-colossal); font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
  color: var(--c-acento); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.codigo--menor { font-size: var(--t-huge); }
.codigo--apagado { color: var(--c-cinzento); }

.txt-lead    { font-size: var(--t-lead); font-weight: 700; }
.txt-corpo   { font-size: var(--t-body); color: var(--c-texto-2); }
.txt-sec     { font-size: var(--t-small); color: var(--c-texto-2); }
.txt-legenda { font-size: var(--t-tiny); color: var(--c-texto-3); }

/* ---------- Cartao ---------- */
.cartao {
  display: flex; flex-direction: column; gap: var(--e-xs);
  padding: var(--e-md) var(--e-lg);
  background: var(--c-cartao); border: 1px solid var(--c-cinzento); border-radius: var(--r-md);
}
.cartao--acento { border-color: var(--c-acento); }
/* com ícone de informação: o «porquê aqui» — azul claro, o ícone à esquerda */
.cartao--info {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-md); align-items: start;
  background: var(--c-neutro-suave);
}
.cartao--info > :not(.cartao__icone) { grid-column: 2; }
.cartao__icone { grid-row: 1 / span 2; width: 28px; height: 28px; color: var(--c-acento); }
/* o destino: «vai a», o código, porquê e o caminho, num cartão branco */
.destino {
  display: flex; flex-direction: column; gap: var(--e-sm);
  padding: var(--e-md) var(--e-lg); background: var(--c-cartao); border-radius: var(--r-md);
}
.caminho {
  display: flex; align-items: flex-start; gap: var(--e-md);
  padding-top: var(--e-sm); border-top: 1px solid var(--c-neutro-suave);
  font-size: var(--t-small); color: var(--c-texto-2);
}
.caminho b { color: var(--c-texto); }
.caminho__icone { width: 24px; height: 24px; flex: none; color: var(--c-texto-3); }

.rotulo { font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-texto-3); }
.rotulo--acento { color: var(--c-acento); }

/* ---------- Selo: estado com cor e palavra ---------- */
.selo {
  align-self: flex-start;
  padding: var(--e-xs) var(--e-md); border-radius: var(--r-pill);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--c-neutro-suave); color: var(--c-neutro);
}
.selo--bom    { background: var(--c-bom-suave);   color: var(--c-bom); }
.selo--aviso  { background: var(--c-aviso-suave); color: var(--c-aviso); }
.selo--erro   { background: var(--c-erro-suave);  color: var(--c-erro); }
.selo--acento { background: var(--c-neutro-suave); color: var(--c-acento); }

/* ---------- Botões ----------
   A variante vem do papel da ação, não de uma cor solta. A AcaoPrincipal é
   uma por ecrã e tem 62 dp; as outras ficam nos 48 dp do mínimo. */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--e-sm); width: 100%;
  min-height: var(--alvo); padding: 0 var(--e-lg);
  border: 2px solid transparent; border-radius: var(--r-md);
  background: var(--c-acento); color: var(--c-sobre-marca);
  font: 700 var(--t-body)/1.2 var(--f-base); text-align: center; cursor: pointer;
}
/* Três temas, e cada botão tem o seu ícone:
     laranja      a ação principal — uma por ecrã, 62 dp
     azul         as alternativas com peso (está ocupada, outro problema)
     transparente as saídas de recurso (não consigo ler, já não está lá) */
.btn__icone { width: 20px; height: 20px; flex: none; }
.btn--acao {
  min-height: var(--alvo-lg);
  background: var(--c-acao); color: var(--c-sobre-marca);
  font-size: var(--t-lead); font-weight: 700;
}
.btn--acao .btn__icone { width: 24px; height: 24px; }
.btn--acao:active { background: var(--c-acao-premido); }
/* a seta diz que o botão leva a outro ecrã; fica encostada à direita */
.btn--com-seta { position: relative; }
.btn__seta { position: absolute; right: var(--e-lg); width: 22px; height: 22px; }
/* a seta de avançar vai colada ao texto, como parte da frase */
.btn__seta--junto { position: static; margin-left: var(--e-md); }
.btn--secundario { border-color: var(--c-acento); background: transparent; color: var(--c-acento); }
.btn:disabled { background: var(--c-neutro-suave); border-color: transparent; color: var(--c-texto-3); cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--c-acento); outline-offset: 2px; }

.par { display: flex; gap: var(--e-md); }
.par > * { flex: 1; }

/* ---------- Leitor: onde a pessoa tem de ler com o gatilho ---------- */
.leitor {
  display: flex; align-items: center; gap: var(--e-lg); min-height: var(--alvo-lg);
  padding: var(--e-md) var(--e-lg); border-radius: var(--r-md);
  background: var(--c-acento); color: var(--c-sobre-marca);
  font-size: var(--t-body); font-weight: 700; line-height: 1.25;
}
/* o leitor: a moldura com as barras, um traço, e o que fazer */
.leitor__icone { width: 36px; height: 36px; flex: none; }
.leitor__traco { align-self: stretch; width: 1px; flex: none; background: var(--c-sobre-marca); opacity: .35; }

/* ---------- Alertas ---------- */
/* O ícone à esquerda diz o tom antes de se ler: visto, aviso, erro. */
.alerta {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-md); row-gap: var(--e-xs); align-items: center;
  padding: var(--e-md) var(--e-lg); border-radius: var(--r-md); font-size: var(--t-small); line-height: 1.3;
}
.alerta__icone { grid-row: 1 / span 2; width: 28px; height: 28px; }
.alerta__titulo { font-size: var(--t-body); font-weight: 700; }
.alerta__texto { grid-column: 2; }
.alerta--bom   { background: var(--c-bom-suave);   color: var(--c-bom); }
.alerta--aviso { background: var(--c-aviso-suave); color: var(--c-aviso); }
.alerta--erro  { background: var(--c-erro-suave);  color: var(--c-erro); }

/* ---------- Tarefa na fila: o quê, e porquê ---------- */
.tarefa {
  display: flex; flex-direction: column; gap: var(--e-xs); width: 100%;
  padding: var(--e-md) var(--e-lg); text-align: left;
  background: var(--c-cartao); border: 1px solid var(--c-cinzento); border-radius: var(--r-md);
  font: inherit; color: inherit;
}
.tarefa--seguinte { border: 2px solid var(--c-acao); }
.tarefa__titulo { font-size: var(--t-body); font-weight: 700; }
.tarefa__porque { font-size: var(--t-tiny); color: var(--c-texto-2); }
.tarefa--sinal .tarefa__porque { font-size: var(--t-micro); }
.tarefa--sinal .tarefa__titulo { font-size: var(--t-small); }
.tarefa--sinal .tarefa__circulo { width: 34px; height: 34px; }
.tarefa--sinal .tarefa__circulo svg { width: 18px; height: 18px; }
/* Uma regra que a pessoa tem de saber, sem ser aviso: caixa azul clara. */
.nota {
  padding: var(--e-md) var(--e-lg); border: 1px solid var(--c-acento); border-radius: var(--r-md);
  background: var(--c-neutro-suave); font-size: var(--t-small); color: var(--c-texto-2);
}
.linha__valor--forte { font-weight: 700; }
.cartao__titulo { font-size: var(--t-big); font-weight: 700; line-height: 1.15; }

/* A seguinte, em destaque: contorno e fundo de acento, como o selo. */
.tarefa--destaque { border: 2px solid var(--c-acento); background: var(--c-neutro-suave); }
.tarefa--destaque .selo { background: var(--c-cartao); }

/* ---------- Topo: voltar, onde se está, e a rede ----------
   Nos ecrãs que se abrem a partir do início. A rede fica, porque sem rede o
   PDA não trabalha e isso tem de se ver em todos os ecrãs. */
.topo {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; flex: none;
  min-height: var(--alvo); padding: 0 var(--e-md);
  background: var(--c-invertido); color: var(--c-sobre-marca);
}
.topo__voltar {
  justify-self: start; display: flex; align-items: center; gap: var(--e-xs);
  min-height: var(--alvo); padding: 0; border: 0; background: none;
  font: 500 var(--t-body) var(--f-base); color: inherit;
}
.topo__voltar svg { width: 20px; height: 20px; }
.topo__titulo { font-size: var(--t-body); font-weight: 700; }
.topo__rede { justify-self: end; font-size: var(--t-small); }  /* num .topo__fim o justify-self não conta, e não estorva */

/* ---------- Cabeça da fila: o título e quantas são ---------- */
.cabeca-fila { display: flex; align-items: center; justify-content: space-between; gap: var(--e-md); }
.cabeca-fila__titulo { font-size: var(--t-big); font-weight: 700; line-height: 1.2; }
.cabeca-fila__conta {
  flex: none; padding: var(--e-xs) var(--e-md); border-radius: var(--r-sm);
  background: var(--c-neutro-suave); font-size: var(--t-small); color: var(--c-texto);
}
.cabeca-fila__sub { margin-top: calc(-1 * var(--e-sm)); font-size: var(--t-small); color: var(--c-texto-2); }
.total-fila {
  padding: var(--e-md) var(--e-lg); border-radius: var(--r-md);
  background: var(--c-neutro-suave); font-size: var(--t-small); color: var(--c-texto);
}

/* ---------- Linha: rótulo à esquerda, valor à direita ---------- */
.linha { display: flex; justify-content: space-between; gap: var(--e-md); font-size: var(--t-small); color: var(--c-texto-2); }
.linha__valor { color: var(--c-texto); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.linha__valor--bom   { color: var(--c-bom); }
.linha__valor--aviso { color: var(--c-aviso); }
.linha__valor--erro  { color: var(--c-erro); }
.linha__valor--mono  { font-family: var(--f-mono); }

/* ---------- Vazio: nunca um ecrã em branco ---------- */
.vazio { display: flex; flex-direction: column; align-items: center; gap: var(--e-sm); padding: var(--e-xxl) var(--e-lg); text-align: center; }
.vazio__titulo { font-size: var(--t-lead); font-weight: 700; }
.vazio__texto  { font-size: var(--t-small); color: var(--c-texto-2); }

/* ---------- Folha de exceção: abre por cima do passo ---------- */
.folha { position: absolute; inset: 0; display: flex; align-items: flex-end; background: var(--c-veu); }
.folha__caixa {
  width: 100%; display: flex; flex-direction: column; gap: var(--e-sm);
  padding: var(--e-lg) var(--e-lg) var(--e-lg);
  background: var(--c-cartao); border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.folha__opcao {
  display: flex; align-items: center; min-height: var(--alvo) ; padding: 0 var(--e-lg);
  border: 1px solid var(--c-cinzento); border-radius: var(--r-sm);
  background: var(--c-cartao); font: inherit; font-size: var(--t-body); color: var(--c-texto); text-align: left;
}

/* ---------- Diálogo: a pergunta que não se pode desfazer ----------
   Só para o que não tem volta: fechar uma saída, mudar o stock de uma
   posição. Duas saídas, a de fechar primeiro, porque é a que a pessoa
   veio fazer. Não serve para avisar — para isso há o aviso, e a folha. */
.dialogo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--e-lg); background: var(--c-veu); }
.dialogo__caixa {
  width: 100%; display: flex; flex-direction: column; gap: var(--e-sm);
  padding: var(--e-lg); background: var(--c-cartao); border-radius: var(--r-lg);
}
.dialogo__titulo { font-size: var(--t-lead); font-weight: 700; }
.dialogo__texto  { font-size: var(--t-body); color: var(--c-texto-2); }
.dialogo__botoes { display: flex; flex-direction: column; gap: var(--e-sm); margin-top: var(--e-sm); }

/* ---------- Aviso: o que aparece e vai-se embora ----------
   Uma linha por cima do ecrã, sem botão nenhum: a pessoa não tem de fazer
   nada, e por isso não a interrompe. Serve para o que o sistema fez sozinho
   — o motor deu uma tarefa, a rede caiu, a leitura ficou guardada. */
.aviso {
  position: absolute; left: var(--e-lg); right: var(--e-lg); bottom: var(--e-lg);
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-sm);
  align-items: center; padding: var(--e-md) var(--e-lg);
  background: var(--c-invertido); color: var(--c-sobre-marca);
  border-radius: var(--r-md); box-shadow: 0 6px 20px rgba(1, 35, 56, .28);
}
.aviso__icone { width: 22px; height: 22px; }
.aviso__texto { font-size: var(--t-body); font-weight: 600; }
.aviso--bom  { background: var(--c-bom);  color: #fff; }
.aviso--erro { background: var(--c-erro); color: #fff; }
/* O ícone é um círculo cheio com o desenho vazado. No aviso escuro o vazado
   está escrito no SVG (#012338); nestes a cor vem de tokens, e num atributo
   de SVG um var() não se resolve — por isso está aqui, numa classe. */
.aviso--bom  .aviso__vazado { stroke: var(--c-bom); }
.aviso--erro .aviso__vazado { stroke: var(--c-erro); }

/* ---------- a marca ----------
   Igual ao GoParts: ROMAFE nunca aparece sozinho. É o nome, o risco laranja
   e o subtítulo, sempre por esta ordem e sempre com o mesmo desenho. */
.lockup { display: inline-grid; justify-items: start; gap: 3px; }
.lockup__nome { font-family: var(--f-marca); font-size: var(--t-big); line-height: 1; color: var(--c-logotipo); margin: 0; }
.lockup__risco { width: 100%; height: 3px; background: var(--c-acao); border-radius: 2px; }
.lockup__sub { font-size: var(--t-small); color: var(--c-texto-2); margin: 0; line-height: 1.2; }
.lockup--invertido .lockup__sub { color: var(--c-sobre-marca); }


/* ---------- Desenho de 23 de setembro: mais ar, cantos redondos ----------
   O retrato de quem está na sessão, à direita da faixa. */
.faixa__avatar {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.16); color: var(--c-sobre-marca);
}
.faixa__avatar svg { width: 14px; height: 14px; }
.faixa__nome { margin-left: auto; }

/* O cartão de topo: o que é este ecrã, com a fotografia do armazém ao fundo. */
.heroi {
  position: relative; overflow: hidden; flex: none;
  margin: var(--e-sm) var(--e-sm) 0; padding: var(--e-md) var(--e-lg);
  background: var(--c-cartao); border-radius: var(--r-lg);
}
.heroi__foto {
  position: absolute; inset: 0 0 0 45%;
  background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)), url("../img/armazem.png") center/cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%);
  mask-image: linear-gradient(90deg, transparent, #000 35%);
}
.heroi__risco { display: block; width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--c-acao); }
.heroi__titulo { position: relative; margin-top: var(--e-xs); font-size: var(--t-big); font-weight: 700; line-height: 1.1; }
.heroi__sub { position: relative; font-size: var(--t-small); color: var(--c-texto-2); }

/* Título de secção com o risco laranja, e um atalho à direita. */
.titulo-seccao { display: flex; align-items: center; gap: var(--e-md); }
.titulo-seccao__risco { flex: none; width: 4px; height: 22px; border-radius: var(--r-pill); background: var(--c-acao); }
.titulo-seccao__texto { font-size: var(--t-lead); font-weight: 700; }
.titulo-seccao__ver {
  margin-left: auto; display: flex; align-items: center; gap: var(--e-xs);
  padding: var(--e-xs) var(--e-md); border: 0; border-radius: var(--r-pill);
  background: var(--c-neutro-suave); color: var(--c-acento);
  font: 700 var(--t-tiny) var(--f-base);
}
.titulo-seccao__ver svg { width: 12px; height: 12px; }

/* Sinal: risco de cor à esquerda, fundo tingido, ícone redondo e seta. */
.tarefa--sinal {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  column-gap: var(--e-md); row-gap: 2px; padding: var(--e-sm) var(--e-md);
  border: 0; border-left: 4px solid var(--c-neutro); background: var(--c-neutro-suave);
}
.tarefa--sinal > :not(.tarefa__circulo):not(.tarefa__seta) { grid-column: 2; }
.tarefa--sinal .tarefa__circulo { grid-row: 1 / span 3; }
.tarefa__seta { grid-row: 1 / span 3; grid-column: 3; width: 16px; height: 16px; color: var(--c-texto-3); }
.tarefa--mapa     { border-left-color: var(--c-aviso); background: var(--c-aviso-suave); }
.tarefa--mapa     .tarefa__circulo { background: var(--c-cartao); color: var(--c-aviso); }
.tarefa--stock    { border-left-color: var(--c-erro);  background: var(--c-erro-suave); }
.tarefa--stock    .tarefa__circulo { background: var(--c-cartao); color: var(--c-erro); }
.tarefa--etiqueta { border-left-color: var(--c-acento); background: var(--c-neutro-suave); }
.tarefa--etiqueta .tarefa__circulo { background: var(--c-cartao); color: var(--c-acento); }

/* Cartão de número: ícone num quadrado de cor, o número, e a seta. */
.numero {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  column-gap: var(--e-sm); row-gap: 0; border: 0; text-align: left;
  padding: var(--e-sm) var(--e-md);
}
.numero__icone {
  grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--c-acento); color: var(--c-sobre-marca);
}
.numero__icone svg { width: 19px; height: 19px; }
.numero__icone--acao { background: var(--c-acao); }
.numero__valor { grid-column: 2; font-size: var(--t-big); }
.numero__nome  { grid-column: 2; font-size: var(--t-micro); line-height: 1.2; }
.numero__seta  { grid-column: 3; grid-row: 1 / span 2; width: 12px; height: 12px; color: var(--c-texto-3); }

/* o círculo do ícone, nas tarefas e nos sinais */
.tarefa__circulo {
  grid-column: 1; grid-row: 1 / span 3;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--c-neutro-suave); color: var(--c-neutro);
}
.tarefa__circulo svg { width: 22px; height: 22px; }


/* =========================================================
   O QUE A REVISÃO DE 1 DE OUTUBRO DE 2026 TROUXE

   A lógica dos fluxos não mudou. Mudou a interface de quem trabalha
   horas seguidas com o aparelho na mão: menos texto, uma ação grande,
   o estado da tarefa sempre no mesmo sítio, e resposta forte à leitura.
   ========================================================= */

/* ---------- modo normal e modo de treino ----------
   O mesmo ecrã serve para as duas coisas, e o conteúdo é um só. O que muda
   é quanto dele se vê: no trabalho do dia a dia, o mínimo; na formação, as
   explicações todas. `.so-treino` é o que só se lê a aprender; `.so-normal`
   é o que o substitui quando se está a trabalhar — tipicamente um ⓘ.
   O modo está no <html data-modo>, e o editor tem o degrau para o trocar. */
:root[data-modo="normal"] .so-treino { display: none; }
:root[data-modo="treino"] .so-normal { display: none; }

/* E, sem se lhes tocar uma a uma: a legenda e a nota são, por definição, o
   que se explica. Quem está a arrumar a terceira palete da manhã já sabe
   como o motor reparte o trabalho — e aquelas linhas estão a ocupar o
   espaço do número que ela precisa de ler ao longe. */
:root[data-modo="normal"] .txt-legenda,
:root[data-modo="normal"] .nota,
:root[data-modo="normal"] .cabeca-fila__sub { display: none; }


/* ---------- o tempo que falta, na cabeça da tarefa ----------
   Não mede pessoas: diz quando é que a coisa tem de estar feita. Por isso
   está ao pé do nome da tarefa e não ao pé do nome de quem a faz. */
.passos__tempo {
  padding: 2px var(--e-sm); border-radius: var(--r-pill);
  background: var(--c-neutro-suave); color: var(--c-texto-2);
  font: 700 var(--t-small) var(--f-mono); font-variant-numeric: tabular-nums;
}
.passos__tempo--aperta { background: var(--c-erro-suave); color: var(--c-erro); }
.passos__linha--tempo { gap: var(--e-sm); }

/* ---------- a resposta à leitura ----------
   Quem lê muitas vezes não olha para o ecrã: a resposta tem de dar pelo
   canto do olho, e o aparelho acompanha-a com som e vibração. A faixa
   ocupa o ecrã todo, verde ou vermelha, e não tem botão — certa, segue
   sozinha; errada, fica até se ler outra vez. */
.leitura {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e-md); padding: var(--e-xl) var(--e-lg); text-align: center;
  color: var(--c-sobre-marca);
}
.leitura--certa  { background: var(--c-bom); }
.leitura--errada { background: var(--c-erro); }
.leitura__marca { width: 84px; height: 84px; flex: none; }
.leitura__titulo { font-size: var(--t-big); font-weight: 700; line-height: 1.1; }
.leitura__codigo {
  font: 700 var(--t-huge)/1.05 var(--f-mono); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.leitura__texto { font-size: var(--t-body); line-height: 1.3; }
/* o que o aparelho faz ao mesmo tempo: fica escrito, para o desenho não se
   perder quando isto passar a Kotlin */
.leitura__sinal {
  display: flex; align-items: center; gap: var(--e-sm);
  padding: var(--e-xs) var(--e-md); border-radius: var(--r-pill);
  background: rgba(255,255,255,.18); font-size: var(--t-tiny); font-weight: 700;
}
.leitura__sinal svg { width: 16px; height: 16px; }

/* ---------- os números que importam ----------
   Pedidas, tiraste, faltam. No chão do armazém lê-se o número, não a linha. */
.contas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-sm); }
.conta {
  display: grid; gap: var(--e-xs); padding: var(--e-md) var(--e-sm);
  background: var(--c-cartao); border-radius: var(--r-md); text-align: center;
}
.conta__nome {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-texto-3);
}
.conta__valor {
  font-size: var(--t-huge); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.conta--falta { background: var(--c-erro-suave); }
.conta--falta .conta__valor { color: var(--c-erro); }
.conta--feito .conta__valor { color: var(--c-bom); }

/* ---------- quanto já vai ----------
   A barra do carregamento: a conta em números e a barra por baixo. */
.progresso { display: grid; gap: var(--e-sm); }
.progresso__linha { display: flex; justify-content: baseline; align-items: baseline; gap: var(--e-sm); }
.progresso__nome { font-size: var(--t-body); font-weight: 700; }
.progresso__conta {
  margin-left: auto; font: 700 var(--t-body) var(--f-mono); font-variant-numeric: tabular-nums;
  color: var(--c-acento);
}
.progresso__barra {
  height: 10px; border-radius: var(--r-pill); background: var(--c-neutro-suave); overflow: hidden;
}
.progresso__cheio { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c-acento); }

/* ---------- o pedido ao gestor, passo a passo ----------
   Chamar e ficar sem saber de nada é o que faz a pessoa ir lá acima.
   Aqui vê-se se ele já leu, se vem, e o que respondeu. */
.espera { display: grid; gap: 0; }
.espera__passo {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: start;
  column-gap: var(--e-md); padding-bottom: var(--e-lg); position: relative;
}
.espera__passo:last-child { padding-bottom: 0; }
.espera__passo:not(:last-child)::before {
  content: ""; position: absolute; left: 10px; top: 20px; bottom: 0;
  width: 2px; background: var(--c-cinzento);
}
.espera__ponto {
  width: 22px; height: 22px; border-radius: var(--r-pill); z-index: 1;
  background: var(--c-cinzento); display: grid; place-items: center;
}
.espera__ponto svg { width: 14px; height: 14px; color: var(--c-sobre-marca); }
.espera__texto { font-size: var(--t-body); color: var(--c-texto-3); line-height: 1.25; }
.espera__hora { font: 500 var(--t-small) var(--f-mono); color: var(--c-texto-3); }
.espera__passo--feito .espera__ponto { background: var(--c-bom); }
.espera__passo--feito .espera__texto { color: var(--c-texto); }
.espera__passo--feito .espera__hora { color: var(--c-texto-2); }
.espera__passo--agora .espera__ponto { background: var(--c-acao); }
.espera__passo--agora .espera__texto { color: var(--c-texto); font-weight: 700; }

/* ---------- o que precisa do gestor ----------
   Primeiro os problemas, depois a operação, e as análises no fim. Cada
   linha diz quem a levantou e há quanto tempo espera. */
.precisa { display: grid; gap: var(--e-sm); }
.precisa__item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  column-gap: var(--e-md); width: 100%; border: 0; text-align: left;
  min-height: var(--alvo); padding: var(--e-sm) var(--e-lg);
  background: var(--c-cartao); border-radius: var(--r-md);
  border-left: 4px solid var(--c-cinzento);
}
.precisa__item--urgente { border-left-color: var(--c-erro);   background: var(--c-erro-suave); }
.precisa__item--serio   { border-left-color: var(--c-serio); }
.precisa__item--aviso   { border-left-color: var(--c-aviso); }
.precisa__ponto { width: 22px; height: 22px; color: var(--c-texto-2); }
.precisa__item--urgente .precisa__ponto { color: var(--c-erro); }
.precisa__texto { display: grid; gap: 1px; }
.precisa__nome { font-size: var(--t-body); font-weight: 700; line-height: 1.2; }
.precisa__quem { font-size: var(--t-tiny); color: var(--c-texto-2); }
.precisa__tempo {
  font: 700 var(--t-small) var(--f-mono); color: var(--c-texto-2);
  font-variant-numeric: tabular-nums;
}
.precisa__item--urgente .precisa__tempo { color: var(--c-erro); }

/* ---------- a saída pequena ----------
   O que não deve competir com a ação principal: «Problema com a etiqueta?»
   é um link no fundo, não um botão ao lado do grande. */
.discreto {
  display: block; width: 100%; min-height: var(--alvo); border: 0; background: transparent;
  color: var(--c-acento); font: 500 var(--t-small) var(--f-base);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- a fotografia da incidência ----------
   O gestor vê o que se passou sem ir lá. É sempre opcional. */
.foto {
  display: flex; align-items: center; justify-content: center; gap: var(--e-md);
  width: 100%; min-height: 96px; padding: var(--e-lg);
  border: 2px dashed var(--c-cinzento); border-radius: var(--r-md);
  background: var(--c-cartao); color: var(--c-acento);
  font: 700 var(--t-body) var(--f-base);
}
.foto__icone { width: 30px; height: 30px; flex: none; }


/* ---------- a posição, como quem anda no armazém a lê ----------
   Oito algarismos são para conferir, não para decorar no caminho. Quem vai
   lá pensa «zona 30, coluna 03, prateleira 01» — é isso que fica grande, e
   o código fica por baixo, pequeno, para bater com a etiqueta. O armazém
   (o 60) não entra: é sempre o mesmo. */
.posicao { display: grid; gap: 2px; }
.posicao__humana {
  font: 700 var(--t-huge)/1.05 var(--f-base); letter-spacing: -.01em;
  color: var(--c-acento); white-space: nowrap;
}
.posicao__codigo {
  font: 500 var(--t-small) var(--f-mono); color: var(--c-texto-2);
  font-variant-numeric: tabular-nums;
}
.posicao--menor .posicao__humana { font-size: var(--t-big); }

/* Uma linha por coisa: o gestor passa os olhos, não lê. O nome e o que o
   acompanha cortam-se antes de embrulhar. */
.precisa__nome, .precisa__quem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.precisa__texto { min-width: 0; }