* { box-sizing: border-box; }
/* Escala tipografica da tela: sete degraus, e o menor salto e 1,14. Abaixo
   disso o olho nao separa dois niveis e a diferenca vira ruido.
   Peso e so 400 e 700. A pilha e system-ui: no tablet da fabrica isso e Roboto,
   que nao tem 600 - o pedido sobe pro 700 e a enfase media nao existe. Quem
   separa o nivel do meio e tamanho, cor ou fundo, como na folha impressa. */
:root {
  --t-micro: .75rem;   /* badge, tag de setor, rotulo em caixa alta */
  --t-apoio: .875rem;  /* meta, hint, obs, quantidade, campo de formulario */
  --t-corpo: 1rem;     /* descricao, celula de tabela, botao */
  --t-item: 1.25rem;   /* codigo da peca, nome do produto, titulo de cartao */
  --t-secao: 1.5rem;   /* titulo de grupo (Cortes, CNC, Vidros) */
  --t-titulo: 1.75rem; /* h1 da tela */
  --t-hero: 2.25rem;   /* o numero do lote, que e o que se abre a tela pra ver */
}
h1 { font-size: var(--t-titulo); }
body { font-family: system-ui, Arial, sans-serif; margin: 0; color: #1c1c1c; background: #f4f4f5; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; background: #000; color: #fff; padding: .7rem 1rem; }
.topbar .brand { font-weight: 700; }
.topbar .who { margin-left: auto; }
.btn-link { color: #d9d9d9; }
form.logout { display: inline; margin: 0; }
button.btn-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; min-height: 0; border-radius: 0; }
main { max-width: 900px; margin: 1rem auto; padding: 0 1rem; }
/* Dashboard usa a largura do monitor wide */
main.wide { max-width: 1500px; }
.flash { background: #fff3cd; border: 1px solid #e0c46b; padding: .6rem .8rem; border-radius: 6px; margin-bottom: 1rem; }
form.login, form { display: grid; gap: .6rem; max-width: 360px; }
form label { display: grid; gap: .2rem; }
/* font-size 16px evita zoom automatico do iOS ao focar campo */
input, button { padding: .7rem; font-size: 16px; }
button { background: #000; color: #fff; border: 0; border-radius: 8px; cursor: pointer; min-height: 48px; }

/* Busca fixa no topo pra ficar sempre acessivel na rolagem */
.search { display: flex; gap: .5rem; max-width: none; margin-bottom: .8rem; position: sticky; top: .4rem; z-index: 2; }
.search input { flex: 1; min-width: 0; }
.search button { flex: 0 0 auto; }

/* Cabecalho espelha o layout da linha (Pedido/Qtd em cima, Item embaixo) */
.setor-tools { margin-bottom: 1rem; }
.progress-line { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.progress-line #prog-text { font-weight: 700; white-space: nowrap; }
.progress-line .overall-bar { flex: 1; }
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .8rem; }
.filtros .filtro { flex: 0 0 auto; min-height: 40px; padding: .4rem .9rem; background: #f0f0f0; color: #000; border: 1px solid #d4d4d4; border-radius: 999px; }
.filtros .filtro.ativo { background: #000; color: #fff; border-color: #000; }
.cat-select { flex: 1 1 130px; min-height: 40px; padding: .4rem .6rem; font-size: 16px; border: 1px solid #d4d4d4; border-radius: 8px; background: #fff; }
/* Mobile: botao ocupa a linha toda. Desktop: auto, alinhado a direita */
#marcar-visiveis { flex: 1 1 100%; min-height: 44px; padding: 0 1.2rem; background: #2e7d32; color: #fff; border: 1px solid #2e7d32; border-radius: 8px; }
@media (min-width: 640px) {
  #marcar-visiveis { flex: 0 0 auto; margin-left: auto; }
}
.checklist-head { display: flex; align-items: center; gap: .9rem; padding: .5rem .9rem; background: #000; color: #fff; font-weight: 700; border-radius: 8px; }
.checklist-head .check-col { width: 1.7rem; flex: 0 0 auto; }
.checklist-head .row-main { gap: 0; }
.checklist-head .desc { color: #fff; font-weight: 700; }
.checklist-head .qtd { background: transparent; color: #fff; padding: 0; }

.checklist { list-style: none; padding: 0; margin-top: .5rem; }
.checklist li { background: #fff; border: 1px solid #dcdcdc; border-radius: 10px; margin-bottom: .5rem; }
.checklist li label { display: flex; align-items: center; gap: .9rem; padding: .9rem; min-height: 62px; cursor: pointer; }
.checklist.ro li { padding: .7rem .9rem; }
.checklist li.done { background: #e7f6e7; border-color: #9bce9b; }
.checklist li.done .desc { text-decoration: line-through; color: #4b6b4b; }

/* Checkbox grande pra dedo em tela pequena */
.toggle { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; accent-color: #2e7d32; }

.row-main { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 0; }
.row-top { display: flex; align-items: center; gap: .6rem; }
.codigo { font-weight: 700; font-size: var(--t-item); }
.qtd { margin-left: auto; background: #f0f0f0; color: #000; border-radius: 999px; padding: .1rem .6rem; font-size: var(--t-apoio); font-weight: 700; white-space: nowrap; }
.desc { font-size: var(--t-corpo); line-height: 1.4; color: #1c1c1c; overflow-wrap: anywhere; }
.badge-urgente { background: #d64545; color: #fff; font-size: var(--t-micro); font-weight: 700; padding: .05rem .45rem; border-radius: 999px; white-space: nowrap; }
#aviso-urgente { position: fixed; bottom: 3rem; left: 50%; transform: translateX(-50%); background: #d64545; border-radius: 999px; padding: .7rem 1.3rem; z-index: 10; box-shadow: 0 4px 14px rgba(0,0,0,.35); white-space: nowrap; }
.btn-urgente { border: 1px solid #999; border-radius: 999px; background: #fff; color: #333; padding: .25rem .9rem; font-size: var(--t-corpo); font-weight: 700; cursor: pointer; min-height: 0; min-width: 6.5rem; text-align: center; }
/* Tabela de produtos abraca o conteudo (sem esticar em tela larga);
   ultima coluna (Prioridade) encolhe e alinha na direita */
.prod-group table.dash { width: auto; }
.prod-group table.dash th { cursor: pointer; user-select: none; }
.prod-group table.dash th[data-ord="asc"]::after { content: " \2191"; }
.prod-group table.dash th[data-ord="desc"]::after { content: " \2193"; }
.prod-group table.dash th:last-child, .prod-group table.dash td:last-child { text-align: right; width: 1%; white-space: nowrap; }
.btn-urgente.ativo { background: #d64545; border-color: #d64545; color: #fff; }
.dash-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.dash-head h1 { margin-right: auto; }
/* altura e padding em em: font-size e a unica alavanca, o botao inteiro escala junto */
.dash-acao { display: inline-flex; align-items: center; min-height: 2.6em; padding: 0 1.1em; border-radius: 8px;
             font-size: var(--t-corpo); text-decoration: none; cursor: pointer; white-space: nowrap; }
.dash-acao-forte { background: #000; color: #fff; border: 1px solid #000; }
.dash-acao-fraca { background: #fff; color: #000; border: 1px solid #c9c9c9; }
.dash-menu-wrap { position: relative; }
/* quadrado: a fonte maior do ⋯ esticaria o min-height em em das irmas */
.dash-menu-btn { width: 2.6em; min-height: 2.6em; padding: 0; justify-content: center; letter-spacing: .1em; }
.dash-menu { position: absolute; right: 0; top: calc(100% + .35rem); min-width: 210px; background: #fff;
             border: 1px solid #d4d4d4; border-radius: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.16);
             padding: .3rem; z-index: 5; }
.dash-menu a, .dash-menu button { display: block; width: 100%; text-align: left; background: none; border: 0;
             padding: .6rem .7rem; border-radius: 6px; font: inherit; font-size: var(--t-corpo); color: #1c1c1c;
             text-decoration: none; cursor: pointer; min-height: 0; }
.dash-menu a:hover, .dash-menu button:hover { background: #f0f0f0; }
.dash-menu hr { border: 0; border-top: 1px solid #ececec; margin: .3rem .2rem; }
/* Seletor de lote e encerrar: o form global e grid com max-width, aqui e uma
   linha de botoes / um botao no meio dos links do cabecalho */
.seletor-lote, .form-inline { max-width: none; }
.seletor-lote { margin: 0 0 .8rem; }
.form-inline { display: inline; }
.btn-encerrar { background: none; border: 0; padding: 0; min-height: 0; font: inherit; color: #d64545; cursor: pointer; }
.btn-reabrir { background: none; border: 0; padding: 0; min-height: 0; font: inherit; color: #1e7d32; cursor: pointer; }
.overall { margin: .5rem 0 1rem; }
.overall-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: .35rem; }
.overall-top > strong { font-size: var(--t-hero); }
.overall-top .stat { font-size: var(--t-apoio); color: #444; }
.overall-top .hint { margin-left: auto; }
/* Poll do dashboard falhando ha 15s+: hora fica vermelha com aviso */
.dash-falha { color: #d64545; font-weight: 700; }
.dash-falha::after { content: " - atualizacao parada, tentando reconectar"; }
.overall-bar { background: #e2e2e2; border-radius: 6px; height: 18px; overflow: hidden; }
.overall-bar > span { display: block; height: 100%; background: #2e7d32; transition: width .4s ease; }
table.dash tr.gargalo td { background: #fdecec; }
.badge-gargalo { background: #d64545; color: #fff; font-size: var(--t-micro); font-weight: 700; padding: .05rem .45rem; border-radius: 999px; margin-left: .4rem; vertical-align: middle; }
/* Grid 2x2 de verdade: linha 1 = tabela/grafico1, linha 2 = atividade/grafico2.
   Itens da mesma linha comecam na mesma altura em ambas colunas (align-items:
   start + grid de verdade, nao duas colunas empilhadas cada uma por conta). */
.dash-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
@media (min-width: 1000px) { .dash-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.chart-box { background: #fff; border: 1px solid #e2e2e2; border-radius: 10px; padding: .8rem; height: 300px; }
.chart-box canvas { max-width: 100%; }
table.dash { border-collapse: collapse; width: 100%; background: #fff; }
table.dash th, table.dash td { border: 1px solid #ddd; padding: .5rem .7rem; text-align: left; }
/* Cabecalho de setor na tela de produtos: barra colorida (setor-cN) + respiro */
.prod-setor { margin: 1.4rem 0 .4rem; padding-left: .6rem; font-size: var(--t-secao); }
/* Filtros por setor fixos no topo ao rolar a lista de produtos */
.prod-filtros { position: sticky; top: .4rem; z-index: 2; background: #f4f4f5; padding: .4rem 0; margin-bottom: .6rem; }
/* Folhas (Cortes/CNC/Vidros) na ponta direita, fundo branco: nao sao setores.
   margin-left auto empurra o grupo inteiro; quando nao cabe, ele desce junto. */
.filtros-folhas { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.filtros-folhas .filtro { background: #fff; }
.filtros-folhas .filtro.ativo { background: #000; color: #fff; border-color: #000; }
/* Ponto colorido do setor no botao de filtro (cor reusa setor-tag-cN) */
.setor-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
/* Cor por setor (mesma paleta dos graficos), casada por indice. box-shadow inset
   desenha a barra DENTRO da celula (border-left com border-collapse vazava pra
   fora da tabela). */
.setor-cell.setor-c0, .prod-setor.setor-c0 { box-shadow: inset 6px 0 0 #1f77b4; }
.setor-cell.setor-c1, .prod-setor.setor-c1 { box-shadow: inset 6px 0 0 #ff7f0e; }
.setor-cell.setor-c2, .prod-setor.setor-c2 { box-shadow: inset 6px 0 0 #8c564b; }
.setor-cell.setor-c3, .prod-setor.setor-c3 { box-shadow: inset 6px 0 0 #17becf; }
.setor-cell.setor-c4, .prod-setor.setor-c4 { box-shadow: inset 6px 0 0 #9467bd; }
table.dash td.col-feitos { color: #1e7d32; font-weight: 700; }
table.dash td.col-faltam { color: #c62828; font-weight: 700; }
.hint { color: #555; font-size: var(--t-apoio); }
.folha-grupo { margin: 1.1rem 0 .3rem; font-size: var(--t-item); }
/* Preenchimento solido: largura = %, cor varia do vermelho (0%) ao verde (100%)
   via HSL (definida no JS por data-hue). */
.bar { background: #e2e2e2; border-radius: 4px; height: 12px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: #2e7d32; }
/* Mesma altura do chart-box (300px), pra encher a linha da grid igual ao grafico do lado */
.atividade { background: #fff; border: 1px solid #e2e2e2; border-radius: 10px; padding: .8rem; height: 300px; display: flex; flex-direction: column; }
.atividade h2 { margin: 0 0 .5rem; font-size: var(--t-item); flex: 0 0 auto; }
.atividade ul {
  list-style: none; margin: 0; padding: 0 .6rem 0 0; flex: 1 1 auto; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #c9c9c9 transparent;
}
.atividade ul::-webkit-scrollbar { width: 6px; }
.atividade ul::-webkit-scrollbar-track { background: transparent; }
.atividade ul::-webkit-scrollbar-thumb { background: #c9c9c9; border-radius: 999px; }
.atividade ul::-webkit-scrollbar-thumb:hover { background: #a6a6a6; }
.atividade li { padding: .4rem 0; border-bottom: 1px solid #eee; font-size: var(--t-apoio); }
.atividade li:last-child { border-bottom: 0; }
.atividade .quando { float: right; color: #888; font-size: var(--t-micro); margin-left: .5rem; }
.setor-tag { color: #fff; border-radius: 999px; padding: .05rem .5rem; font-size: var(--t-micro); margin-right: .5rem; }
.setor-tag-c0 { background: #1f77b4; }
.setor-tag-c1 { background: #ff7f0e; }
.setor-tag-c2 { background: #8c564b; }
.setor-tag-c3 { background: #17becf; }
.setor-tag-c4 { background: #9467bd; }

/* Cartao de formulario com upload (importar lote, atualizar sistema): um
   cartao so, com o que precisa ser conferido logo antes do campo de arquivo.
   O input de arquivo cru do navegador nao aceita estilo, entao o de verdade
   cobre a caixa com opacity 0 - e nao display:none, senao o Chrome nao foca
   o campo pro balao do required. */
.form-col { max-width: 640px; }
.form-cartao { background: #fff; border: 1px solid #e2e2e2; border-radius: 12px; padding: 1.4rem; }
.form-cartao form { max-width: none; gap: 1rem; }
.form-cartao button { width: 100%; }
/* auto-fit: dois campos dividem a linha na tela e empilham sozinhos no
   celular, quando a coluna nao comporta mais 15rem por campo */
.form-linha { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.form-campo { display: grid; gap: .3rem; }
.form-campo > span { font-size: var(--t-apoio); font-weight: 700; }
.form-campo input[type="text"] { padding: .7rem .8rem; border: 1px solid #c9c9c9; border-radius: 8px; background: #fff; }
.form-campo input[type="text"]:focus { outline: 2px solid #000; outline-offset: -1px; }
.form-arquivo { position: relative; display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem;
                border: 1px dashed #c9c9c9; border-radius: 8px; background: #fff; cursor: pointer; }
.form-arquivo:focus-within { outline: 2px solid #000; outline-offset: -1px; }
.form-arquivo input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
                opacity: 0; cursor: pointer; }
.form-arquivo-btn { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 2.4em; padding: 0 .9em;
                border: 1px solid #c9c9c9; border-radius: 8px; background: #f0f0f0; font-size: var(--t-apoio); }
.form-arquivo-nome { color: #555; font-size: var(--t-apoio); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-arquivo-nome.escolhido { color: #1c1c1c; }
.form-req { background: #fafafa; border: 1px solid #ececec; border-radius: 8px; padding: .7rem .9rem;
                font-size: var(--t-apoio); color: #444; }
.form-req-titulo { margin: 0 0 .5rem; font-size: var(--t-micro); font-weight: 700; text-transform: uppercase;
                letter-spacing: .04em; color: #555; }
.form-req ul { margin: 0; padding-left: 1.1rem; }
.form-req li { margin-bottom: .3rem; }
.form-req li:last-child { margin-bottom: 0; }
.form-req code { background: #f0f0f0; border-radius: 4px; padding: .05rem .3rem; font-size: .88em; }

/* Estado da instalacao, acima do cartao: versao atual e como foi a ultima
   tentativa. Cor so no status, que e o unico dado que pede acao. */
.up-estado { margin: 0 0 1rem; padding: 1rem 1.2rem; background: #fff;
                border: 1px solid #e2e2e2; border-radius: 12px; display: grid;
                gap: .8rem 1.6rem; font-size: var(--t-apoio); }
@media (min-width: 640px) {
  .up-estado { grid-template-columns: auto 1fr; }
  .up-estado > div + div { border-left: 1px solid #ececec; padding-left: 1.6rem; }
}
.up-rot { display: block; margin-bottom: .1rem; font-size: var(--t-micro); color: #777;
                text-transform: uppercase; letter-spacing: .04em; }
.up-versao { font-size: var(--t-item); font-weight: 700; font-variant-numeric: tabular-nums; }
.up-status-ok, .up-status-rollback, .up-status-erro { font-size: var(--t-micro); font-weight: 700;
                padding: .05rem .45rem; border-radius: 999px; color: #fff; white-space: nowrap; }
.up-status-ok { background: #1e7d32; }
.up-status-rollback, .up-status-erro { background: #d64545; }
.up-detalhe { display: block; margin-top: .2rem; color: #555; }

/* Modo TV: pra rodar num monitor da fabrica sem interacao - sem topbar,
   fonte grande pra leitura a distancia. Mesmas cores do dashboard normal. */
.tv-mode .topbar { display: none; }
.tv-mode main.tv { max-width: none; margin: 0; padding: 1.4rem 2rem; }
.tv-mode .dash-head h1 { font-size: 2.2rem; }
/* Chrome, nao dado: na TV os botoes encolhem contra o h1 de 2.2rem em vez de
   acompanhar a escala do resto da tela */
.tv-mode .dash-acao { font-size: .88rem; }
.tv-mode .overall-top > strong { font-size: 3rem; }
.tv-mode .overall-top .stat { font-size: 1.1rem; }
.tv-mode .overall-bar { height: 26px; }
.tv-mode table.dash { font-size: 1.3rem; }
.tv-mode table.dash th, .tv-mode table.dash td { padding: .8rem 1rem; }
.tv-mode .chart-box, .tv-mode .atividade { height: 340px; }
.tv-mode .atividade li { font-size: 1.05rem; }

/* Lista de cortes da tela de produtos (so leitura; marcar e na tela do setor) */
/* produto = 1 cartao (header escuro + materiais aninhados); espaco maior entre
   produtos que entre os materiais internos deixa a hierarquia clara */
.corte-bloco { margin: 0 0 1.4rem; border: 1px solid #cfd6de; border-radius: 10px; overflow: hidden; background: #fff; }
.corte-bloco .bloco-head { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem; background: #000; color: #fff;
                              font-size: var(--t-item); font-weight: 700; }
.corte-bloco .bloco-head .qtd { background: #f0f0f0; }
.corte-bloco.urgente .bloco-head { background: #7c2626; }
.corte-bloco .checklist { margin-top: .3rem; }
.corte-bloco .row-top { gap: .6rem; }
.corte-bloco .checklist .qtd { flex: 0 0 2.8rem; margin-left: 0; text-align: center; }
/* comprimento: pill escuro alinhado a esquerda, logo apos a qtd.
   uppercase padroniza o texto solto ("diametro"/"Diametro"/"Bola") no pill */
.corte-bloco .compr { background: #000; color: #fff; font-weight: 700; font-size: var(--t-corpo); padding: .1rem .5rem; border-radius: 6px; white-space: nowrap; }
/* obs: empurrada pra direita, ambar (mesma cor da borda), nao cortar reto */
.corte-bloco .obs { margin-left: auto; flex: 0 0 auto; white-space: nowrap; font-size: var(--t-apoio); color: #c77800; text-align: right; }
.corte-bloco li.done .obs { color: #7a8a7a; }
/* material = secao aninhada dentro do cartao do produto; divisoria separa um
   material do proximo, sem virar caixa solta */
.corte-bloco .subsec { padding: 0 .9rem .3rem; }
.corte-bloco .subsec:first-of-type { padding-top: .45rem; }
.corte-bloco .subsec + .subsec { border-top: 1px solid #e3e6ea; }
.corte-bloco .subsec-head { margin: .5rem 0 .1rem; font-weight: 700; font-size: var(--t-apoio); color: #000;
                            text-transform: uppercase; letter-spacing: .04em; }
/* separa material . espessura . bitola no subtitulo pra leitura rapida */
.corte-bloco .subsec-head .sep { color: #666; font-weight: 400; margin: 0 .45rem; }
.corte-bloco .subsec .checklist { margin: 0; }
.corte-bloco .subsec .checklist li { background: transparent; border: 0; border-top: 1px solid #ececec; border-radius: 0; margin: 0; }
.corte-bloco .subsec .checklist li:first-child { border-top: 0; }
.corte-bloco .subsec .checklist.ro li { padding: .55rem .1rem; }
.corte-bloco .subsec .checklist li.done { background: #eef8ee; }
.corte-secao h2 { margin: 1.4rem 0 .3rem; font-size: var(--t-secao); }
.badge-conflito { background: #c77800; color: #fff; font-size: var(--t-micro); font-weight: 700; padding: .05rem .45rem; border-radius: 999px; white-space: nowrap; }
.corte-bloco.conflito .bloco-head { outline: 2px solid #c77800; }
/* phone/tablet estreito: obs longa (nowrap) + overflow:hidden do cartao
   cortava o texto reto na borda. Deixa a linha quebrar e a obs virar 2
   linhas (obs curta continua inline a direita). 600px cobre phone deitado e
   tablet pequeno, onde a linha ainda nao tem folga pra obs longa nowrap */
@media (max-width: 600px) {
  .corte-bloco .row-top { flex-wrap: wrap; row-gap: .4rem; }
  .corte-bloco .obs { white-space: normal; flex: 1 1 auto; min-width: 5rem; }
  /* dashboard no celular: a tabela de 5 colunas estoura abaixo de ~375px.
     aperta padding/fonte e esconde a coluna Total (= Feitos + Faltam) via
     nth-child, que funciona tambem nas linhas que o dashboard.js reconstroi */
  .dash-grid table.dash th, .dash-grid table.dash td { padding: .4rem .45rem; font-size: var(--t-apoio); }
  .dash-grid table.dash td.setor-cell { font-size: var(--t-micro); }
  .dash-grid table.dash th:nth-child(4), .dash-grid table.dash td:nth-child(4) { display: none; }
  .chart-box { height: 220px; }
  .atividade { height: auto; max-height: 320px; }
  .prod-group table.dash { width: 100%; table-layout: fixed; }
  .prod-group table.dash th, .prod-group table.dash td { padding: .35rem .4rem; font-size: var(--t-apoio); }
  /* token longo sem espaco (ex "(LXPXH)") quebra em vez de esticar a coluna */
  .prod-group table.dash td { overflow-wrap: anywhere; word-break: break-word; }
  .prod-group table.dash th:first-child, .prod-group table.dash td:first-child { width: 3.2rem; }
  .prod-group table.dash th:nth-child(3), .prod-group table.dash td:nth-child(3) { width: 2.2rem; }
  .prod-group table.dash th:nth-child(4), .prod-group table.dash td:nth-child(4) { width: 3.4rem; }
  /* regra base poe width:1% aqui; sem largura fixa o botao urgente vaza a celula */
  .prod-group table.dash th:last-child, .prod-group table.dash td:last-child { width: 4.9rem; text-align: left; }
  .prod-group .btn-urgente { min-width: 0; padding: .5rem .55rem; font-size: var(--t-micro); }
  .topbar .btn-link { display: inline-block; padding: .5rem 0; }
}

.btn-print, .btn-exportar { margin-left: .6rem; min-height: 0; padding: .15rem .7rem; font-size: var(--t-apoio); font-weight: 700; color: #000; background: #f0f0f0; border: 1px solid #000; border-radius: 999px; cursor: pointer; }
.btn-exportar { text-decoration: none; }

/* As tres folhas so existem no @media print: na tela o setor tem a lista dele.
   As tres sao cards em duas colunas e dividem o desenho (.corte-card e os .cc-*,
   mais abaixo); o que muda e o que vai dentro do card */
.corte-folha, .vidro-folha, .cnc-folha, .folha-cab { display: none; }

.cnc-flag { font-weight: 700; }

/* Lista da CNC na tela (o papel e a .cnc-folha). Quantidade + nome nao enchem
   uma tabela; em colunas, a chapa mais cheia cabe numa tela sem rolar. Sem
   contagem fixa de colunas: cabem quantas a largura permitir (5 no monitor da
   fabrica, 1 no celular) */
.cnc-lista { columns: 17rem; column-gap: 2rem;
             background: #fff; border: 1px solid #ddd; border-radius: 8px;
             padding: .6rem .9rem; }
.cnc-lista > div { break-inside: avoid; display: flex; gap: .6rem;
                   padding: .28rem 0; border-bottom: 1px solid #f0f0f0; }
.cnc-lista > div:last-child { border-bottom: 0; }
.cnc-lista b { min-width: 2.2rem; text-align: right; font-variant-numeric: tabular-nums; }

/* O botao marca .print-alvo na secao que vai pro papel e .imprimindo no body:
   assim a mesma folha atende qualquer secao, sem duplicar o bloco por setor */
@media print {
  body.imprimindo .topbar,
  body.imprimindo .dash-head,
  body.imprimindo .prod-filtros,
  body.imprimindo .seletor-lote,
  body.imprimindo .prod-group:not(.print-alvo),
  body.imprimindo .no-print { display: none !important; }
  /* dentro da secao alvo so a folha vai pro papel; o resto (titulo, cartoes e
     tabelas de tela) some sem precisar ser listado classe por classe */
  body.imprimindo .print-alvo > *:not(.corte-folha):not(.vidro-folha):not(.cnc-folha):not(.folha-cab) { display: none !important; }
  body.imprimindo .print-alvo { display: block !important; }
  /* Fundo chapado tem que sobreviver ao "sem cores de fundo" que o Chrome liga
     por padrao: sem isto as faixas pretas e os cabecalhos cinzas saem em branco.
     Num seletor so - eram oito copias da mesma dupla de declaracoes e a regra
     nova entrava sem ela ate alguem imprimir e notar */
  body.imprimindo .folha-cab,
  body.imprimindo .cc-nome,
  body.imprimindo .cc-titulo th,
  body.imprimindo .cc-flag,
  body.imprimindo .cc-mat th,
  body.imprimindo .cc-tag,
  body.imprimindo .cc-obs i,
  body.imprimindo .corte-card th,
  body.imprimindo .corte-card tr.par td,
  body.imprimindo .cnc-chapa,
  body.imprimindo .cnc-card th,
  body.imprimindo .cnc-card tr.par td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* faixa do alto, a mesma nas tres folhas. Sai so na primeira pagina: no fluxo
     e onde o Chrome poe o que se pediu - com position: fixed ele desenha o
     elemento no alto de TODA pagina, por cima do cabecalho da tabela, e ainda
     inventa uma pagina a mais */
  /* Preto chapado, nao amarelo com vermelho: a
     laser da fabrica e monocromatica e converte por luminancia, onde #ffff00
     cai em 226 de 255 (quase branco) e #d40000 em 63 (cinza sujo). O que
     sobrevive a essa conversao e contraste, nao matiz - dai preto e branco nas
     faixas e cinza chapado nos cabecalhos. */
  body.imprimindo .folha-cab { display: block !important;
    background: #000; color: #fff;
    font-weight: 700; font-size: 13pt; text-align: center; padding: 1.5mm; margin-bottom: 5mm; }
  /* a faixa carrega os tres dados da folha: data a esquerda, folha e lote no
     centro e quantidade a direita. Assim o pe fica livre pra legenda do ! e do ? */
  body.imprimindo .folha-cab .folha-total,
  body.imprimindo .folha-cab .folha-data { color: #fff; font-size: 9pt;
    font-weight: 400; line-height: 20px; }
  body.imprimindo .folha-cab .folha-data { float: left; }
  body.imprimindo .folha-cab .folha-total { float: right; }

  /* --- folha de cortes: um card por produto, em duas colunas --------------
     Mesmo desenho da folha da CNC, que a fabrica ja conhece. A spec do material
     (descricao + espessura + bitola) e igual em todas as pecas da subsecao:
     como coluna, era o mesmo texto repetido linha a linha comendo metade da
     largura - vira faixa cinza, e na linha fica so o que muda de peca pra peca.
     Sem altura fixa e sem divisao no servidor, ao contrario da CNC: o maior
     produto da tabela tem 9 pecas (~65mm), cabe folgado numa coluna, entao o
     navegador so precisa nao partir o card. */
  body.imprimindo .corte-folha { display: block !important; color: #000; }
  body.imprimindo .corte-grid { column-count: 2; column-gap: 6mm; }
  /* 4mm de respiro, nao 5: a etiqueta da obs poe uma segunda linha em algumas
     pecas e o lote de agosto passava pra uma quinta folha com um card so nela */
  body.imprimindo .corte-card { border: .5mm solid #000; margin-bottom: 4mm;
    break-inside: avoid; page-break-inside: avoid; }
  /* mesma faixa das outras duas folhas: e o mesmo elemento no mesmo papel */
  body.imprimindo .cc-nome { background: #000; color: #fff; font-weight: 700;
    font-size: 11.5pt; padding: 1.6mm 2mm; }
  /* 18px = a caixa de linha da faixa (11,5pt x 1,2), pra o que flutua centrar
     com o nome */
  body.imprimindo .cc-nome .cc-qtd { float: right; font-size: 8pt; line-height: 18px; }
  /* o ! do urgente sai do preto da faixa em quadrado branco: e o mesmo contraste
     que a laser P&B da fabrica imprime no resto da folha */
  body.imprimindo .cc-flag { display: inline-block; min-width: 3.5mm; padding: 0 .5mm;
    background: #fff; color: #000; text-align: center; }
  /* na legenda o fundo e branco, entao o quadrado inverte pra ficar igual ao
     que o operador ve na faixa do produto */
  body.imprimindo .corte-rodape .cc-flag { background: #000; color: #fff; }
  body.imprimindo .corte-card table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  body.imprimindo .corte-card th { background: #c9c9c9; border-bottom: .35mm solid #000;
    font-size: 7.5pt; font-weight: 700; text-align: left; padding: .8mm 1.5mm; }
  /* faixa do material: um degrau mais escura que o cabecalho das colunas, com
     fio preto em cima pra separar do material anterior */
  /* 9pt: o titulo do material nao fica menor que as linhas que ele encabeca */
  body.imprimindo .cc-mat th { background: #dcdcdc; border-top: .35mm solid #000;
    border-bottom: .2mm solid #999; font-size: 9pt; padding: 1mm 1.5mm;
    text-transform: uppercase; }
  body.imprimindo .cc-sep { font-weight: 400; padding: 0 .6mm; }
  /* centro, nao baseline: a linha junta quadrado de marcar (4,5mm), numero em
     system-ui 9pt e croqui em Consolas 7,5pt - tres caixas de altura diferente,
     que na baseline saem cada uma numa altura */
  body.imprimindo .corte-card td { border-top: .2mm solid #999; padding: 1mm 1.5mm;
    vertical-align: middle; }
  body.imprimindo .corte-card tr.par td { background: #f2f2f2; }
  body.imprimindo .corte-card .cc-ok { width: 8mm; }
  /* mesmo quadrado de 4,5mm da CNC: caneta grossa, folha na prancheta */
  body.imprimindo .corte-card td.cc-ok::before { content: ""; display: block;
    width: 4.5mm; height: 4.5mm; border: .3mm solid #000; margin: 0 auto; }
  body.imprimindo .corte-card .cc-num { width: 9mm; text-align: right; font-weight: 700; }
  body.imprimindo .corte-card .cc-med { width: 20mm; text-align: right; font-weight: 700;
    white-space: nowrap; font-variant-numeric: tabular-nums; }
  body.imprimindo .corte-card .cc-med .un { font-weight: 400; font-size: 7pt; }
  /* monoespacada: a obs e um croqui em texto ("45° /====em pé ====\45°") e so
     alinha se todo caractere tiver a mesma largura */
  body.imprimindo .corte-card .cc-obs { font-family: Consolas, "DejaVu Sans Mono", monospace;
    font-size: 7.5pt; line-height: 1.15; }
  /* a celula guarda mais de uma instrucao: a planilha quebra linha e o papel
     tem que quebrar junto, senao duas dobras viram uma frase so */
  body.imprimindo .cc-linha { display: block; }
  /* etiqueta pro que muda o que a maquina faz. A medida de corte vai em preto
     chapado porque ela contradiz o numero da coluna ao lado - a peca acabada
     tem 205mm e a barra a serrar, 381. As outras sao de contorno: avisam, nao
     corrigem. Fonte do sistema, nao a monoespacada da celula */
  body.imprimindo .cc-tag { display: inline-block; margin: 0 1.5mm 1.1mm 0;
    padding: 0 1mm; border: .25mm solid #000;
    font-family: system-ui, Arial, sans-serif; font-size: 7pt; font-weight: 700;
    letter-spacing: .3px; }
  body.imprimindo .cc-tag:last-child { margin-bottom: 0; }
  body.imprimindo .cc-tag-cortar { background: #000; color: #fff; }
  /* o corpo do tubo em cinza: o que se le sao os angulos das pontas e a posicao */
  body.imprimindo .cc-tubo { color: #777; }
  body.imprimindo .cc-obs i { font-style: normal; font-weight: 700;
    background: #e2e2e2; padding: 0 .5mm; }
  body.imprimindo .corte-rodape { font-size: 7.5pt; margin-top: 2mm; }

  /* --- folha de vidros: um card por Ø, no desenho da folha de cortes ------
     Mesmo card, mesma faixa de material, mesmo quadrado de marcar. O que muda
     vem do conteudo: o Ø pode ter 49 linhas e nao caber numa coluna, entao ele
     se parte, e quem decide onde e paginas_vidros (app/vidro.py) - o navegador
     nao sabe numerar "parte 1 de 2" no pedaco. Mesma divisao da folha da CNC. */
  body.imprimindo .vidro-folha { display: block !important; color: #000; }
  body.imprimindo .vidro-grid { column-count: 2; column-gap: 6mm; column-fill: auto;
    height: 250mm; }
  body.imprimindo .vidro-grid + .vidro-grid { break-before: page; page-break-before: always;
    height: 268mm; }
  /* sem a borda do card de corte: o card daqui se parte, e a caixa do pedaco
     estica ate o fim da coluna - a borda fechava um retangulo vazio embaixo da
     ultima linha. Quem separa um Ø do outro e a faixa preta e o respiro */
  body.imprimindo .vidro-card { border: 0; }
  body.imprimindo .vidro-card.vira { break-before: column; }
  /* o Ø e por onde o olho entra na folha: mesma faixa preta do nome do produto
     na folha de cortes, mas como linha do thead pra repetir na quebra */
  body.imprimindo .cc-titulo th { background: #000; color: #fff; border-bottom: 0;
    font-size: 11.5pt; font-weight: 700; text-align: left; padding: 1.4mm 2mm; }
  /* Ø que nao coube numa coluna: diz em qual pedaco da lista o vidraceiro esta,
     senao duas faixas iguais parecem a mesma lista repetida */
  body.imprimindo .cc-parte { font-size: 8pt; font-weight: 400; }
  body.imprimindo .cc-titulo .cc-qtd { float: right; font-size: 8pt; line-height: 18px; }
  body.imprimindo .corte-card .cc-ped { width: 16mm; font-variant-numeric: tabular-nums; }
  body.imprimindo .cc-mat-qtd { float: right; font-weight: 400; font-size: 8pt;
    line-height: 14px; text-transform: none; }
  body.imprimindo .cc-pos { font-size: 6.5pt; }

  /* --- folha da CNC: um card por chapa, em duas colunas -------------------
     Medidas em mm porque a folha e um objeto fisico: o card tem 92mm (metade
     dos 190mm uteis do A4) e a coluna tem 245mm, o que sobra da altura depois
     do cabecalho e do rodape. Sem a @page, a margem seria a do dialogo de
     impressao e a altura da coluna nao fecharia com a da folha. */
  @page { size: A4 portrait; margin: 10mm; }
  /* preto, nao o azul do texto do sistema: numa laser P&B azul vira cinza */
  body.imprimindo .cnc-folha { display: block !important; color: #000; }
  /* column-fill: auto enche uma coluna por vez; onde ela vira e decidido no
     servidor (.vira), porque o balance do navegador desequilibrou feio - card
     e indivisivel e ele nao sabe distribuir */
  /* 245mm = os 277 uteis do A4 menos o cabecalho, o rodape e uma folga: sem a
     altura fixa o column-fill: auto nao sabe onde virar a coluna, e sem a folga
     o rodape cai numa segunda folha */
  body.imprimindo .cnc-grid { column-count: 2; column-gap: 6mm; column-fill: auto;
    height: 245mm; }
  /* a folha cresceu e nao cabe mais numa pagina: uma .cnc-grid por folha A4, a
     partir da segunda comecando em pagina nova. Quem decide o que vai em cada
     folha e paginas_cnc - o navegador nao sabe partir um card */
  body.imprimindo .cnc-grid + .cnc-grid { break-before: page; page-break-before: always; }
  body.imprimindo .cnc-card { border: .5mm solid #000; margin-bottom: 6mm;
    break-inside: avoid; page-break-inside: avoid; }
  body.imprimindo .cnc-card.vira { break-before: column; }
  body.imprimindo .cnc-chapa { background: #000; color: #fff; font-weight: 700;
    font-size: 11.5pt; padding: 1.6mm 2mm; }
  body.imprimindo .cnc-chapa .cnc-qtd { float: right; font-size: 8pt; line-height: 18px; }
  /* chapa que nao coube numa coluna: avisa em qual pedaco da lista o operador
     esta, senao duas folhas com a mesma faixa preta parecem a mesma lista */
  body.imprimindo .cnc-chapa .cnc-parte { font-size: 8pt; font-weight: 400; }
  body.imprimindo .cnc-card table { width: 100%; border-collapse: collapse; font-size: 9pt; }
  body.imprimindo .cnc-card th { background: #c9c9c9; border-bottom: .35mm solid #000;
    font-size: 7.5pt; font-weight: 700; text-align: left; padding: .8mm 1.5mm; }
  body.imprimindo .cnc-card td { border-top: .2mm solid #999; padding: 1mm 1.5mm; }
  body.imprimindo .cnc-card tr.par td { background: #f2f2f2; }
  body.imprimindo .cnc-card .cnc-ok { width: 8mm; }
  /* 4,5mm: quem marca esta de pe na maquina, com caneta grossa e a folha na
     prancheta - quadrado pequeno demais faz o risco cair na linha vizinha.
     E o quadrado que da a altura da linha, o texto de 9pt e mais baixo */
  body.imprimindo .cnc-card td.cnc-ok::before { content: ""; display: block;
    width: 4.5mm; height: 4.5mm; border: .3mm solid #000; }
  body.imprimindo .cnc-card .cnc-num { width: 9mm; text-align: right; font-weight: 700; }
  /* legenda do ! e do ?, so quando a folha tem algum deles; o lote e a data
     ficam na faixa preta do topo */
  body.imprimindo .cnc-rodape { font-size: 7.5pt; margin-top: 2mm; }
}