/* =====================================================================
   Layout do painel. Depende de tokens.css e componentes.css.
   Só arranjo de página aqui — componente reutilizável vai para
   componentes.css, e cor nova vira token.
   ===================================================================== */

#app { min-height: 100vh; }

/* ------------------------------------------------------------ moldura */

.wc-barra {
  position: sticky; top: 0; z-index: 10;
  border-radius: 0;
  border-width: 0 0 1px;
  padding: var(--wc-e-2) var(--wc-e-4);
}
.barra-marca { height: 26px; flex: none; }
.barra-conta { font-size: var(--wc-txt-apoio); color: var(--wc-tinta-2); }

.conteudo {
  max-width: var(--wc-largura-folha);
  margin: 0 auto;
  padding: var(--wc-e-5) var(--wc-e-4) var(--wc-e-6);
  display: flex; flex-direction: column; gap: var(--wc-e-4);
}
.visao-rodape { margin-top: var(--wc-e-2); }

/* --------------------------------------------------------- onboarding */

.passos { list-style: none; margin: var(--wc-e-3) 0 0; padding: 0;
          display: flex; flex-direction: column; gap: var(--wc-kerf); }
.passo {
  display: flex; align-items: center; gap: var(--wc-e-3);
  padding: var(--wc-e-3);
  border-radius: var(--wc-raio-p);
  background: var(--wc-sup2);
}
.passo-marca {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: var(--wc-peso-maximo);
  border: 1.5px solid var(--wc-linha-forte);
  color: var(--wc-botao-tinta);
}
.passo.feito .passo-marca {
  background: var(--wc-ok); border-color: var(--wc-ok);
}
.passo-texto { color: var(--wc-tinta); text-decoration: none; font-size: var(--wc-txt-menor); }
.passo-texto:hover { color: var(--wc-acao); text-decoration: underline; }
.passo.feito .passo-texto { color: var(--wc-tinta-2); }
.passo .wc-rotulo { margin-left: auto; }

/* -------------------------------------------------------------- login */

body.entrada-fundo { background: var(--wc-sup2); }
body.entrada-fundo #app {
  display: grid; place-items: center;
  padding: var(--wc-e-4);
  min-height: 100vh;
}

.entrada {
  width: min(420px, 100%);
  display: flex; flex-direction: column; gap: var(--wc-e-4);
  padding: var(--wc-e-5);
}
.entrada-marca { height: 92px; display: block; margin: 0 auto var(--wc-e-2); }
.entrada-forma { display: flex; flex-direction: column; gap: var(--wc-e-3); }
.entrada-forma .wc-botao { justify-content: center; margin-top: var(--wc-e-2); }
.entrada-nota {
  margin: 0; font-size: var(--wc-txt-apoio); color: var(--wc-tinta-2);
}
.entrada-rodape {
  margin-top: var(--wc-e-2); padding-top: var(--wc-e-3);
  border-top: 1px solid var(--wc-linha);
}
.entrada-erro:not([hidden]) { display: block; }

@media (max-width: 640px) {
  .wc-barra { flex-wrap: wrap; gap: var(--wc-e-2); }
  .wc-barra nav { order: 3; width: 100%; overflow-x: auto; }
  .barra-conta { display: none; }
  .conteudo { padding: var(--wc-e-4) var(--wc-e-3) var(--wc-e-5); }
}

/* ------------------------------------------------ listas de recursos */

.tela-cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wc-e-3); flex-wrap: wrap;
}
.wc-tabela td.acoes {
  text-align: right; white-space: nowrap;
  display: flex; gap: var(--wc-e-2); justify-content: flex-end;
}

/* --------------------------------------------------------- editor */

dialog.wc-dialogo {
  border: 1px solid var(--wc-linha-forte);
  color: var(--wc-tinta);
  max-height: 86vh;
  overflow-y: auto;
}
dialog.wc-dialogo::backdrop { background: rgba(0, 0, 0, .45); }
dialog.editor { max-width: 560px; width: min(560px, 92vw); }
.forma-config { display: flex; flex-direction: column; gap: var(--wc-e-3); }

.avancado {
  border: 1px solid var(--wc-linha);
  border-radius: var(--wc-raio-p);
  padding: var(--wc-e-3);
  background: var(--wc-sup2);
  display: flex; flex-direction: column; gap: var(--wc-e-2);
}
.avancado summary {
  cursor: pointer; font-size: var(--wc-txt-apoio);
  font-weight: var(--wc-peso-forte); color: var(--wc-tinta-2);
}
.avancado-json {
  font-family: var(--wc-mono); font-size: 12.5px;
  color: var(--wc-tinta); background: var(--wc-sup);
  border: 1px solid var(--wc-linha-forte);
  border-radius: var(--wc-raio-p); padding: var(--wc-e-2);
  resize: vertical; width: 100%; box-sizing: border-box;
}

/* --------------------------------------------------------- estoque */

.estoque-linhas { display: flex; flex-direction: column; gap: var(--wc-kerf);
                  margin-top: var(--wc-e-3); }
.estoque-linha {
  display: flex; align-items: center; gap: var(--wc-e-3);
  padding: var(--wc-e-2) var(--wc-e-3);
  background: var(--wc-sup2); border-radius: var(--wc-raio-p);
}
.estoque-nome { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.estoque-nome > span:first-child {
  font-size: var(--wc-txt-menor);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.estoque-quantidade { flex: 0 0 108px; }
.estoque-quantidade input { width: 100%; box-sizing: border-box; }
.estoque-estado { flex: 0 0 52px; color: var(--wc-ok); }
.estoque-vazio { margin-top: var(--wc-e-3); }

@media (max-width: 560px) {
  .estoque-linha { flex-wrap: wrap; }
  .estoque-nome { flex-basis: 100%; }
}

/* --------------------------------------------------- montagem do job */

.plano-estoque { margin-top: var(--wc-e-2); }

.pecas-lista { display: flex; flex-direction: column; gap: var(--wc-kerf);
               margin-top: var(--wc-e-3); }
.peca-linha {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr .7fr auto auto;
  gap: var(--wc-e-2); align-items: center;
}
.peca-linha input[type="text"], .peca-linha input[type="number"] {
  font: inherit; font-size: var(--wc-txt-menor);
  color: var(--wc-tinta); background: var(--wc-sup);
  border: 1px solid var(--wc-linha-forte);
  border-radius: var(--wc-raio-p); padding: 7px 9px; width: 100%;
  box-sizing: border-box;
}
.peca-linha input:focus { border-color: var(--wc-marca); }
.peca-cabecalho { padding: 0 var(--wc-e-2) 2px; }
.peca-giro { justify-self: center; }

/* ------------------------------------------------------- diagnóstico */

.diagnostico { display: flex; flex-direction: column; gap: var(--wc-e-3); }
.diagnostico-rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--wc-e-4); flex-wrap: wrap;
}
.diagnostico-custo { display: flex; flex-direction: column; gap: 2px; }

/* -------------------------------------------------------- lista/job */

.linha-clicavel { cursor: pointer; }
.linha-clicavel:focus-visible { outline: 2px solid var(--wc-marca);
                                outline-offset: -2px; }
.job-titulo { display: flex; align-items: baseline; gap: var(--wc-e-3);
              flex-wrap: wrap; }
.job-id { font-size: var(--wc-txt-apoio); color: var(--wc-tinta-2); }
.job-estado { display: flex; flex-direction: column; gap: var(--wc-e-3); }
.job-faixa { display: flex; align-items: center; gap: var(--wc-e-3);
             flex-wrap: wrap; }
.job-dados {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--wc-e-2) var(--wc-e-4); margin: 0;
  font-size: var(--wc-txt-menor);
}
.job-dados dt { align-self: center; }
.job-dados dd { margin: 0; color: var(--wc-tinta-2); }
.job-nota { margin-top: var(--wc-e-3); }

@media (max-width: 720px) {
  .peca-linha { grid-template-columns: 1fr 1fr .6fr auto auto; }
  .peca-linha input[type="text"] { grid-column: 1 / -1; }
  .peca-cabecalho { display: none; }
}

/* -------------------------------------------------- desenho da chapa */

.wc-plano { margin-top: var(--wc-e-3); }
.desenho-medidas { font-size: var(--wc-txt-apoio); color: var(--wc-tinta-2); }
.job-execucao { display: flex; flex-direction: column;
                gap: var(--wc-e-3); align-items: flex-start; }

/* ----------------------------------------------------- tema na barra */

.tema-escolha select {
  font: inherit; font-size: var(--wc-txt-apoio);
  color: var(--wc-tinta-2); background: var(--wc-sup);
  border: 1px solid var(--wc-linha-forte);
  border-radius: var(--wc-raio-p);
  padding: 5px 8px;
}
.tema-escolha select:hover { color: var(--wc-tinta); }
.tema-escolha select:disabled { opacity: .6; }
.passos-dica { margin-top: var(--wc-e-3); }

@media (max-width: 640px) { .tema-escolha { display: none; } }

/* --------------------------------------- preenchimentos e material */

.fillers { display: block; }
.fillers summary { cursor: pointer; list-style-position: outside; }
.fillers summary .wc-sub { display: inline; }
.fillers > .wc-ajuda { margin: var(--wc-e-2) 0 0; }
.fillers > .wc-botao { margin-top: var(--wc-e-3); }

.peca-linha.com-material {
  grid-template-columns: 1.2fr .9fr .9fr .6fr 1fr auto auto;
}
.peca-material {
  font: inherit; font-size: var(--wc-txt-apoio);
  color: var(--wc-tinta); background: var(--wc-sup);
  border: 1px solid var(--wc-linha-forte);
  border-radius: var(--wc-raio-p); padding: 7px 8px;
  width: 100%; box-sizing: border-box;
}
.desenho-tempo { font-size: var(--wc-txt-apoio); color: var(--wc-tinta-2); }

@media (max-width: 720px) {
  .peca-linha.com-material { grid-template-columns: 1fr 1fr .6fr auto auto; }
  .peca-linha.com-material .peca-material { grid-column: 1 / -1; }
}

.wc-legenda i.legenda-varias { border-width: 1.5px; }

/* ---------- tela de EXECUÇÃO do operador (leva G1) ------------------ *
 * Vista DE PÉ, a cerca de 1 m, no tablet ao lado da serra, às vezes com
 * luva. Foge das medidas do resto do painel de propósito: cota enorme,
 * alvos acima de 54 px (WCAG pede 24 como mínimo e 44 como boa prática;
 * mão com luva pede mais) e a barra de navegação FIXA NO TOPO — o dedo
 * avança etapa atrás de etapa, e o botão não pode fugir quando o
 * desenho abaixo muda de tamanho.
 *
 * Alvos medidos no addon (tablet 1920x1200): desenho >= ~79% da altura,
 * cromo próprio <= ~155 px.
 *
 * A ALTURA do desenho NÃO está aqui: vem do JS, medida do viewport.
 * Cadeia de height:100% é a lição mais cara do addon — basta um elo com
 * altura automática e o desenho vaza da tela, no tablet, enquanto o
 * desktop parece certo.                                                */

:root { --wc-safe-bottom: env(safe-area-inset-bottom, 0px); }

.wc-execucao {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: var(--wc-safe-bottom);
}

.exec-cabecalho { display: flex; flex-direction: column; gap: 10px; }
.exec-titulo {
  display: flex; align-items: center; gap: var(--wc-e-3); flex-wrap: wrap;
}
.exec-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.exec-acao { min-height: 54px; padding-inline: 20px; }
/* botão que é só símbolo: quadrado, para não virar um retângulo largo */
.exec-simbolo {
  padding-inline: 0; width: 54px; justify-content: center;
}
.exec-simbolo svg { width: 20px; height: 20px; }

/* Detalhes — <details> nativo, fechado por padrão. */
.exec-detalhes {
  border: 1px solid var(--wc-linha); border-radius: var(--wc-raio);
  background: var(--wc-sup);
}
.exec-detalhes-titulo {
  cursor: pointer; padding: 13px var(--wc-e-4); font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: 10px;
}
.exec-detalhes-titulo::-webkit-details-marker { display: none; }
.exec-detalhes-titulo::before { content: "\2630"; color: var(--wc-tinta-2); }
.exec-detalhes-corpo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--wc-e-4); padding: 0 var(--wc-e-4) var(--wc-e-4);
  border-top: 1px solid var(--wc-linha);
}
.exec-bloco { display: flex; flex-direction: column; gap: 6px; }
.exec-bloco-titulo, .exec-bloco-sub {
  margin: var(--wc-e-3) 0 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--wc-tinta-2);
}
.exec-dado {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: var(--wc-txt-apoio);
}
.exec-dado-rotulo { color: var(--wc-tinta-2); }
.exec-alimentacao {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 190px; overflow-y: auto;
}
.exec-alim-linha {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--wc-txt-apoio); padding: 5px 9px;
  border: 1px solid var(--wc-linha); border-radius: var(--wc-raio-p);
}
.exec-alim-linha.retalho {
  border-color: var(--wc-retalho-linha);
  background: color-mix(in srgb, var(--wc-retalho-linha) 10%, transparent);
}
.exec-alim-seq {
  font-family: var(--wc-mono); color: var(--wc-tinta-3); min-width: 22px;
}
.exec-alim-nome { flex: 1; }
.exec-alim-n { font-family: var(--wc-mono); font-weight: 700; }

/* Faixa de progresso: uma linha, sempre visível. */
.exec-progresso {
  display: flex; align-items: center; gap: var(--wc-e-3); flex-wrap: wrap;
}
.exec-progresso-contador { font-variant-numeric: tabular-nums; }
.exec-progresso-material {
  font-size: var(--wc-txt-apoio); color: var(--wc-tinta-2);
}
.exec-barra-progresso {
  flex: 1; min-width: 120px; max-width: 320px; height: 8px;
  background: var(--wc-sup2); border: 1px solid var(--wc-linha);
  border-radius: var(--wc-raio-pilula); overflow: hidden;
}
.exec-barra-trilho { display: block; height: 100%; background: var(--wc-marca); }
.exec-progresso-pct {
  font-size: var(--wc-txt-apoio); color: var(--wc-tinta-2);
}

/* Navbar STICKY NO TOPO — posição fixa de propósito.
   `top` acompanha a barra do app (medida em JS), senão ela desliza por
   baixo dela ao rolar. No quiosque a barra do app some e a variável
   vira 0 — a regra abaixo cuida disso. */
.exec-navbar {
  position: sticky; top: var(--wc-barra-altura, 0px); z-index: 20;
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  padding: 10px 0; background: var(--wc-fundo);
  border-bottom: 1px solid var(--wc-linha);
}
.exec-nav { min-height: 54px; padding-inline: 18px; font-size: 16px; }
.exec-seta { opacity: .8; }
.exec-nav .exec-seta:first-child { margin-right: 6px; }
.exec-nav .exec-seta:last-child { margin-left: 6px; }
.exec-nav-principal { min-width: 180px; font-size: 17px; }
.exec-nav-aviso { border-color: var(--wc-aviso); color: var(--wc-aviso-texto); }

/* Corpo: cartão de ação à ESQUERDA, desenho à direita. */
.exec-corpo {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--wc-e-4); align-items: start;
}
@media (max-width: 820px) {          /* retrato de tablet */
  .exec-corpo { grid-template-columns: 1fr; }
}

.exec-acao-cartao { display: flex; flex-direction: column; gap: 4px; }
.exec-eyebrow {
  margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--wc-tinta-2);
}
.exec-orientacao { margin: 0; font-size: 15px; font-weight: 600; }
.exec-cota { margin: 2px 0 0; display: flex; align-items: baseline; gap: 6px; }
.exec-cota-valor {
  font-family: var(--wc-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(46px, 7vw, 72px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1; color: var(--wc-tinta);
}
.exec-cota-unidade {
  font-size: 22px; font-weight: 600; color: var(--wc-tinta-2);
}
.exec-cota-ref { margin: 0; font-size: 14px; color: var(--wc-tinta-2); }
.exec-tamanho { margin: 2px 0 0; font-size: 12px; color: var(--wc-tinta-3); }

.exec-chip {
  align-self: flex-start; margin-top: 8px;
  font-size: 12.5px; font-weight: 600; padding: 7px 13px;
  border-radius: var(--wc-raio-pilula); border: 1px solid var(--wc-linha-forte);
  color: var(--wc-tinta-2); background: var(--wc-sup2);
}
.exec-chip-aviso {
  color: var(--wc-aviso-texto); border-color: var(--wc-aviso);
  background: var(--wc-aviso-tint);
}
.exec-chip-ok {
  color: var(--wc-ok); border-color: var(--wc-ok);
  background: color-mix(in srgb, var(--wc-ok) 10%, transparent);
}

.exec-libera {
  margin-top: 14px; padding-top: 10px;
  border-top: 1px dashed var(--wc-linha-forte);
  display: flex; flex-direction: column; gap: 4px;
}
.exec-libera-titulo {
  margin: 0 0 2px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--wc-tinta-2);
}
.exec-libera-linha {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--wc-txt-apoio);
}
.exec-libera-nome { font-weight: 600; }
.exec-libera-dim {
  color: var(--wc-tinta-3); font-family: var(--wc-mono); font-size: 12px;
}
.exec-libera-n {
  margin-left: auto; font-family: var(--wc-mono); font-weight: 700;
}

/* Desenho */
.exec-desenho {
  border: 1px solid var(--wc-linha); border-radius: 8px;
  background: var(--wc-sup); overflow: hidden;
}
.exec-desenho-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--wc-linha);
}
.exec-toggle { min-height: 38px; padding-inline: 12px; font-size: 13px; }

/* Barra da chapa: nome + detalhes + zoom. Os números da chapa NÃO
   ficam inline (o addon põe, e numa barra estreita eles brigam com o
   nome do material, que é o que o operador confere de relance). */
.exec-chapa-barra {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-bottom: 1px solid var(--wc-linha);
}
.exec-chapa-nome { font-weight: 600; font-size: var(--wc-txt-apoio); }
.exec-chapa-detalhes { position: relative; margin-right: auto; }
.exec-chapa-detalhes-botao {
  cursor: pointer; list-style: none; line-height: 1;
  width: 26px; height: 26px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--wc-linha-forte); border-radius: 50%;
  color: var(--wc-tinta-2); background: var(--wc-sup2);
}
.exec-chapa-detalhes-botao::-webkit-details-marker { display: none; }
.exec-chapa-detalhes-botao::before { content: "i"; font-weight: 700; font-size: 13px; }
.exec-chapa-detalhes[open] .exec-chapa-detalhes-botao {
  border-color: var(--wc-marca); color: var(--wc-marca);
}
.exec-chapa-detalhes-corpo {
  position: absolute; left: 0; top: 32px; z-index: 25;
  min-width: 236px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 5px;
  background: var(--wc-sup); border: 1px solid var(--wc-linha);
  border-radius: var(--wc-raio); box-shadow: 0 14px 34px rgb(0 0 0 / .28);
  /* nunca mais alto que a tela, e rola se precisar */
  max-height: min(60dvh, 420px); overflow-y: auto;
}
/* Abre para CIMA quando não há espaço embaixo (tablet em retrato, ou
   quiosque com o desenho ocupando quase tudo). Quem decide é o JS, que
   mede — CSS sozinho não sabe onde é a borda da tela. */
.exec-chapa-detalhes.para-cima .exec-chapa-detalhes-corpo {
  top: auto; bottom: 32px;
}

.exec-zoom { display: flex; align-items: center; gap: 4px; }
.exec-zoom-b {
  min-width: 36px; min-height: 32px; padding: 0 8px;
  font-size: 16px; line-height: 1;
}
.exec-zoom-nivel {
  min-width: 54px; text-align: center; font-size: 12.5px;
  color: var(--wc-tinta-2);
}
/* Margem em volta do SVG (mesma receita do addon). Sem ela o desenho
   encosta na borda de baixo e é cortado em tela cheia no tablet.
   `env(safe-area-inset-bottom)` devolve a faixa da barra de gestos do
   Android/iOS — no desktop resolve 0 e sobra só o valor base; o `vh`
   mantém a proporção em telas mais baixas que a do desktop. */
.exec-chapa {
  display: block; box-sizing: border-box;
  padding: 8px 12px calc(max(28px, 3vh) + var(--wc-safe-bottom));
}
.exec-chapa svg { width: 100%; height: 100%; display: block; }
/* Arrastar a vista com zoom. `touch-action: none` é obrigatório: sem
   ele o navegador rouba o gesto para rolar a página e o pan não
   acontece no tablet — que é justamente onde ele serve. */
.exec-chapa.arrastavel svg { cursor: grab; touch-action: none; }
.exec-chapa.arrastavel svg:active { cursor: grabbing; }

/* Quiosque: cromo mínimo, alvos maiores, LARGURA TODA.
   O container do painel limita a 1120 px, o que é certo para telas de
   leitura e errado aqui: no tablet da serra cada pixel a mais é
   desenho. O alvo do addon é desenho >= ~79% da tela. */
.wc-execucao.quiosque {
  width: 100vw; max-width: 100vw;
  margin-left: 50%; transform: translateX(-50%);
  padding-inline: 12px; box-sizing: border-box;
}
/* O cromo do APP some por estado (nada de esconder por URL). Medido:
   a barra do painel mais a folga do container custam 76 px do alto. */
body.wc-quiosque .wc-barra { display: none; }
body.wc-quiosque .conteudo { padding: 6px 0 0; max-width: none; }
/* Sem barra do app, quem gruda no topo gruda em 0 — a variável ainda
   guarda a altura de quando ela existia. */
body.wc-quiosque { --wc-barra-altura: 0px; }

/* Cabeçalho vira UMA linha fina: no quiosque o título é luxo — o que o
   operador precisa é do desenho. */
.wc-execucao.quiosque { gap: 6px; }
.wc-execucao.quiosque .exec-cabecalho {
  flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap;
}
.wc-execucao.quiosque .exec-titulo .wc-secao-titulo { display: none; }
/* O único banner que sobrou no cabeçalho é o de ciclo ENCERRADO, e ele
   indica uma AÇÃO (Reiniciar) que a pílula sozinha não sugere. Por
   isso ele fica, mesmo no quiosque. */
.wc-execucao.quiosque .exec-acao {
  min-height: 40px; padding-inline: 14px; font-size: 14px;
}
.wc-execucao.quiosque .exec-navbar { padding: 6px 0; }
.wc-execucao.quiosque .exec-desenho-topo { padding: 4px 10px; }
.wc-execucao.quiosque .exec-toggle {
  min-height: 30px; padding-inline: 10px; font-size: 12.5px;
}
.wc-execucao.quiosque .exec-nav { min-height: 64px; }
.wc-execucao.quiosque .exec-nav-principal { min-width: 210px; font-size: 19px; }
/* O ☰ flutuante do quiosque exige LARGURA. Em tela estreita ele caía
   em cima dos botões de ação — visto no celular: o ícone tapando o
   "Sair da tela cheia". Abaixo de 820 px ele fica no fluxo, como no
   modo normal. */
/* No quiosque o ☰ é ÍCONE e mora na LINHA DO TOPO, encostado à
   direita — `margin-left: auto` o empurra para o canto, na mesma
   fileira dos botões de ação. Antes ele flutuava em absoluto e caía em
   cima deles quando a linha quebrava. */
.wc-execucao.quiosque .exec-detalhes {
  border: none; background: none; margin-left: auto; position: relative;
}
.wc-execucao.quiosque .exec-detalhes-titulo {
  font-size: 0; width: 44px; height: 44px; padding: 0;
  justify-content: center;
  border: 1px solid var(--wc-linha); border-radius: var(--wc-raio-p);
  background: var(--wc-sup);
}
.wc-execucao.quiosque .exec-detalhes-titulo::before { font-size: 18px; }
.wc-execucao.quiosque .exec-detalhes[open] .exec-detalhes-corpo {
  position: absolute; right: 0; top: 4px; z-index: 30;
  width: min(620px, 100vw - 24px);
  max-height: min(70dvh, 620px); overflow-y: auto;
  background: var(--wc-sup); border: 1px solid var(--wc-linha);
  border-radius: var(--wc-raio); box-shadow: 0 18px 44px rgb(0 0 0 / .3);
  padding: var(--wc-e-4);
}

/* TELA ESTREITA (celular). Quatro botões de 54-64 px em duas fileiras
   comem meia tela — visto no aparelho. Aqui a navegação encolhe e o
   peso vai todo para o "Próximo", que é o botão que o operador aperta
   dezenas de vezes; os pulos de chapa viram secundários de verdade.
   Continuam todos acima dos 44 px de alvo. */
@media (max-width: 720px) {
  .exec-navbar { gap: 6px; padding: 8px 0; flex-wrap: nowrap; }
  /* UMA LINHA SÓ. `flex: 1 1 0` faz os quatro dividirem a largura em
     partes iguais, e `min-width: 0` é o que permite encolher abaixo do
     tamanho do texto — sem ele o flex respeita a largura mínima do
     conteúdo e a fileira quebra de novo. `nowrap` fecha a porta.
     Ainda em 46 px de altura, acima do alvo de toque. */
  .exec-nav {
    flex: 1 1 0; min-width: 0; min-height: 46px;
    font-size: 13px; padding-inline: 6px;
    white-space: nowrap;
    display: block; text-align: center; line-height: 30px;
  }
  /* As setas FICAM (é o desenho do addon, e elas dizem a direção
     antes da palavra). O que sai é o tamanho extra do principal: a
     13 px, "◄ Anterior" e "Próximo ►" cabem nos 93 px da coluna —
     medido. Foi o principal a 14 px em negrito que estourava e me fez,
     erradamente, cortar a palavra. */
  .exec-nav .exec-seta { margin-inline: 3px; }
  .exec-nav-principal {
    /* os 180-210 px do principal forçavam fileira própria e depois
       esticavam o botão para a largura toda. O destaque dele vem da
       COR, não de fonte maior — fonte maior aqui só desalinha. */
    min-width: 0; font-size: 13px; font-weight: var(--wc-peso-maximo);
  }
  .wc-execucao.quiosque .exec-nav { min-height: 50px; line-height: 34px; }
  /* A fonte TEM de ser repetida aqui. `.wc-execucao.quiosque
     .exec-nav-principal` tem especificidade (0,3,0) e vence o
     `.exec-nav-principal` (0,1,0) desta media query — media query não
     dá peso nenhum. Sem repetir, os 19 px do quiosque continuavam
     valendo em tela estreita e empurravam a seta para fora do botão. */
  .wc-execucao.quiosque .exec-nav-principal { min-width: 0; font-size: 13px; }
}

/* PONTEIRO GROSSO (dedo, luva): os controles secundários do desenho
   nascem compactos para o mouse, e no toque ficavam abaixo dos 44 px
   que são a boa prática do WCAG — medido: 28 px o botão de detalhes,
   32 px os de zoom, 38 px o alternador de vista. Aqui eles crescem.
   `pointer: coarse` é o teste certo: pega tablet e celular sem chutar
   por largura de tela (um tablet grande é largo E é toque). */
@media (pointer: coarse) {
  .exec-toggle { min-height: 44px; padding-inline: 14px; }
  .exec-chapa-detalhes-botao { width: 44px; height: 44px; }
  .exec-zoom-b { min-width: 48px; min-height: 44px; font-size: 18px; }
  .exec-zoom-nivel { min-width: 62px; font-size: 14px; }
  /* alvo maior pede barra um pouco mais folgada, senão encosta */
  .exec-chapa-barra { padding: 8px 12px; gap: 12px; }
}

/* ---------- relatório do plano (leva G2) ---------------------------- *
 * A folha que vai para a máquina, no molde do PDF do addon: cabeçalho
 * com resumo e ordem de alimentação, depois UMA CHAPA POR PÁGINA com o
 * desenho na largura toda e o Roteiro de Corte embaixo, em 3 colunas.
 * No fim, a lista de peças.
 *
 * O desenho fica em cima e sozinho de propósito: é o que o operador
 * confere de longe. Lado a lado com a tabela ele cairia para 60 % da
 * folha (foi como montei primeiro, e o PDF do addon mostrou o erro).
 *
 * PDF é a impressão do navegador — sem bundler e sem biblioteca de PDF
 * no servidor, uma folha bem paginada em HTML dá o mesmo resultado.    */

.wc-relatorio { display: flex; flex-direction: column; gap: var(--wc-e-5); }
/* GRUDADA no topo: a folha passa de 3000 px e o botão de imprimir
   ficava lá em cima — quem rolava até a terceira chapa não achava mais.
   O `top` vem da ALTURA MEDIDA da barra do app (`medirBarra` no
   app.js): fixá-lo em 52 px escondeu os botões atrás dela no celular,
   onde a barra quebra em duas linhas. */
.rel-acoes {
  position: sticky; top: var(--wc-barra-altura, 52px); z-index: 9;
  display: flex; gap: var(--wc-e-3);
  padding: var(--wc-e-2) 0;
  background: var(--wc-fundo);
  border-bottom: 1px solid var(--wc-linha);
}

.rel-cabecalho { display: flex; flex-direction: column; gap: var(--wc-e-3); }
/* resumo em duas colunas de rótulo/valor, como no addon */
.rel-dados {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px var(--wc-e-5); font-size: var(--wc-txt-apoio);
}
.rel-par { display: flex; gap: 10px; }
.rel-rotulo { color: var(--wc-tinta-2); }
.rel-valor { font-weight: var(--wc-peso-forte); }
.rel-resumo {
  display: flex; flex-wrap: wrap; gap: var(--wc-e-5);
  padding: var(--wc-e-3) 0;
  border-block: 1px solid var(--wc-linha);
}
.rel-bloco { display: flex; flex-direction: column; gap: 2px; }
.rel-bloco .rel-rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
}
.rel-numero { font-size: 20px; }

/* ordem de alimentação: o que buscar na prateleira, e em que ordem */
.rel-alimentacao {
  background: var(--wc-sup2); border: 1px solid var(--wc-linha);
  border-radius: var(--wc-raio-p); padding: var(--wc-e-3);
  display: flex; flex-direction: column; gap: 3px;
}
.rel-alim-titulo {
  margin: 0 0 4px; font-size: 11px; font-weight: var(--wc-peso-forte);
  text-transform: uppercase; letter-spacing: .1em; color: var(--wc-tinta-2);
}
.rel-alim-linha {
  display: flex; align-items: baseline; gap: 10px;
  font-size: var(--wc-txt-apoio);
}
.rel-alim-linha.retalho { color: var(--wc-ok); }
.rel-alim-seq {
  font-family: var(--wc-mono); color: var(--wc-tinta-3);
  min-width: 34px; flex: none;
}
.rel-alim-nome { flex: 1; }
.rel-alim-n { font-family: var(--wc-mono); font-weight: var(--wc-peso-forte); }

/* uma chapa: título, desenho na largura toda, roteiro embaixo */
.rel-chapa { display: flex; flex-direction: column; gap: var(--wc-e-3); }
.rel-chapa-topo {
  display: flex; align-items: baseline; gap: var(--wc-e-3); flex-wrap: wrap;
}
.rel-chapa-nome { font-weight: var(--wc-peso-forte); }
.rel-chapa-numeros {
  font-size: var(--wc-txt-apoio); color: var(--wc-tinta-2);
}
.rel-desenho svg { width: 100%; height: auto; display: block; }

.rel-legenda {
  margin: 0 0 5px; font-size: var(--wc-txt-apoio); color: var(--wc-tinta-2);
}
.rel-roteiro-grade {
  display: grid; gap: var(--wc-e-3); align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Em tela estreita as três fatias empilham. Lado a lado elas não
   cabem e a folha ganhava rolagem horizontal. */
@media (max-width: 720px) {
  .rel-roteiro-grade { grid-template-columns: 1fr; }
}
.rel-tabela { width: 100%; font-size: 12px; border-collapse: collapse; }
.rel-tabela th, .rel-tabela td {
  padding: 3px 6px; border: 1px solid var(--wc-linha); text-align: left;
}
.rel-tabela th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--wc-tinta-2); font-weight: var(--wc-peso-forte);
}
.rel-tabela .col-seq { width: 11%; font-weight: var(--wc-peso-maximo); }
.rel-tabela .col-corte { width: 22%; }
.rel-tabela .col-obs { width: 20%; white-space: nowrap; }
.rel-ref { color: var(--wc-tinta-3); font-size: 10.5px; }
.rel-tabela-pecas td:nth-child(3), .rel-tabela-pecas td:nth-child(4),
.rel-tabela-pecas td:nth-child(5) { text-align: right; }

.rel-pecas { display: flex; flex-direction: column; gap: var(--wc-e-3); }
.rel-nota {
  margin: 0; font-size: var(--wc-txt-apoio); color: var(--wc-tinta-2);
  border-left: 3px solid var(--wc-linha-forte); padding-left: 10px;
}

/* ---------- impressão ---------------------------------------------- */
@media print {
  /* O cromo do app não vai para o papel. */
  .wc-barra, .rel-acoes, .nao-imprime { display: none !important; }
  .conteudo { max-width: none; padding: 0; }
  /* Fundo branco e tinta preta SEMPRE: no tema escuro a folha sairia
     com um retângulo preto de tinta, e a impressora não perdoa. */
  :root, :root[data-tema="escuro"] {
    --wc-fundo: #FFFFFF; --wc-sup: #FFFFFF; --wc-sup2: #F7F7F7;
    --wc-tinta: #000000; --wc-tinta-2: #333333; --wc-tinta-3: #555555;
    --wc-linha: #BBBBBB; --wc-linha-forte: #888888;
  }
  body { background: #FFFFFF; }
  @page { margin: 12mm; }
  /* UMA CHAPA POR PÁGINA. */
  .rel-chapa { break-inside: avoid; page-break-inside: avoid; }
  .rel-chapa + .rel-chapa { break-before: page; page-break-before: always; }
  .rel-pecas { break-before: page; page-break-before: always; }
  .rel-tabela tr { break-inside: avoid; page-break-inside: avoid; }
  /* O desenho não pode passar de ~60 % da altura útil, senão o roteiro
     é empurrado para a página seguinte e a chapa deixa de caber numa
     folha só — que é o ponto de ter uma chapa por página. */
  .rel-desenho svg { max-height: 60vh; }
  /* No papel as três colunas voltam: a folha A4 tem largura para elas,
     e é o formato do PDF do addon. */
  .rel-roteiro-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* degraus de velocidade por espessura (P2.7d) */
.degraus { display: flex; flex-direction: column; gap: var(--wc-e-2); }
.degraus-linhas { display: flex; flex-direction: column; gap: var(--wc-kerf); }
.degrau-linha {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--wc-e-2);
  align-items: center;
}
.degraus > .wc-botao { align-self: flex-start; }