/* ==========================================================================
   AcoCalc
   ==========================================================================

   COMO ESTE ARQUIVO ESTA ORGANIZADO

   Ele tem duas metades, e entender isso evita perder tempo:

     1. BASE      estrutura e componentes, do inicio ate "TEMA GRAFITE"
     2. TEMA      cor, tipografia e acabamento, dali ate o fim

   A regua de valores (espacamento, raio, sombra, cor, fonte) vive no bloco
   ACABAMENTO, no fim. Mexer no visual quase sempre e mexer num token de la,
   nao numa regra daqui.

   REGRA DE OURO: a ficha nao acompanha o tema. Ela vai impressa para a
   bancada e em PDF para o cliente, entao continua sendo papel branco. Os
   tokens dela sao redefinidos dentro de ".ficha, .bloco-auditoria".

   O QUE FALTA (para quem pegar isto depois): cerca de 50 seletores ainda
   aparecem duas vezes - a regra clara original e a sobreposicao escura logo
   abaixo. Funciona, mas o certo e ter um so. E trabalho mecanico e sem risco,
   feito aos poucos.

   MAPA
     :root, base, reset .................. estrutura da janela
     lateral, item-etapa ................. navegacao de etapas
     ficha, cartao, tabela-pecas ......... a folha impressa
     resumo-etapa, romaneio, auditoria ... blocos da ficha
     desenhos ............................ SVG das pecas e do corte
     clientes, usuarios, kanban .......... telas do sistema
     painel-peca ......................... paineis laterais
     TEMA GRAFITE ........................ cor de tudo o que e casca
     ESTRUTURA ........................... trilho, topo, migalha
     Mapa do fluxo ....................... os nos ligados
     Acento e tipografia ................. a regua de cor e letra
     ACABAMENTO .......................... espacamento, sombra, movimento
     Esqueleto e Sobre ................... estados de carregamento
   ========================================================================== */

:root {
  --navy: #103454;
  --azul: #195788;
  --azul-claro: #dcebf7;
  --azul-borda: #b9d6ee;

  --tinta: #1b2733;
  --tinta-fraca: #5b6b7b;
  --linha: #d8dfe6;
  --fundo: #eef2f6;
  --papel: #ffffff;

  --ok: #1f7a4d;
  --alerta: #b46a00;
  --erro: #b3261e;

  --topo-altura: 56px;
  --lateral-largura: 262px;
}

* { box-sizing: border-box; }

/* vários blocos aqui usam display:flex/grid, que sozinho venceria o atributo hidden */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--tinta);
  background: var(--fundo);
  overflow: hidden;
}

/* busca da lista de clientes — fica junto da lista, não na barra do topo */
.campo-busca {
  width: 300px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--borda);
  border-radius: var(--r-pilula);
  background: var(--g-alto);
  font-family: inherit;
  font-size: 13px;
  color: var(--g-texto);
  outline: none;
}
.campo-busca::placeholder { color: #9aa7b4; }
.campo-busca:focus { border-color: var(--azul); box-shadow: 0 0 0 3px #19578822; }

.botao {
  /* Mesma razao do ".botao-claro" logo abaixo: altura minima, nao fixa. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid #ffffff38;
  border-radius: 6px;
  background: #ffffff14;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.botao:hover { background: #ffffff26; }
.botao.primario { background: var(--azul-claro); color: var(--navy); border-color: transparent; font-weight: 600; }
.botao.primario:hover { background: #fff; }
.botao.fantasma { background: transparent; }
.botao:disabled { opacity: .5; cursor: default; }

/* ---------- estrutura ---------- */

.corpo {
  display: flex;
  height: calc(100% - var(--topo-altura));
}

.lateral {
  width: var(--lateral-largura);
  flex: none;
  overflow-y: auto;
  padding: var(--e4) 0 var(--e5);
  background: var(--g-base);
  border-right: 1px solid var(--borda);
}

.conteudo {
  flex: 1;
  overflow-y: auto;
  padding: 22px 26px 60px;
}

/* ---------- lateral ---------- */

.lateral-titulo {
  padding: 4px 16px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.cabecalho-obra { padding: 4px 16px 14px; border-bottom: 1px solid var(--linha); margin-bottom: 12px; }
.cabecalho-obra h2 { margin: 0 0 3px; font-size: 14px; color: var(--navy); line-height: 1.3; }
.cabecalho-obra p { margin: 0; font-size: 12px; color: var(--tinta-fraca); line-height: 1.5; }
.cabecalho-obra .peso-total { margin-top: 8px; font-size: 18px; font-weight: 700; color: var(--azul); }
.cabecalho-obra .peso-total span { font-size: 11px; font-weight: 400; color: var(--tinta-fraca); }

.item-etapa {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  border: 0;
  border-left: 3px solid transparent;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}
.item-etapa:hover { background: #f3f7fb; }
.item-etapa.ativo { background: var(--azul-claro); border-left-color: var(--azul); font-weight: 600; }

.item-etapa .codigo {
  flex: none;
  /* Piso, e nao teto: codigo comprido continua crescendo. Eram 62px, largos
     demais para "E1" — e depois que o selo de situacao entrou na linha, esses
     16px sobrando viravam a descricao cortada em "Baldra...". */
  min-width: 46px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--navy);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .3px;
}
.item-etapa.ativo .codigo { background: var(--azul); }
.item-etapa .rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-etapa .kg { flex: none; font-size: 11.5px; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }
.item-etapa.ativo .kg { color: var(--navy); }
.item-etapa .marca-ok { flex: none; width: 12px; color: var(--ok); font-size: 12px; }

/* ---------- em que pe esta a etapa ----------

   O selo diz o que aconteceu com o aco daquela ficha, e nao so onde ela esta:
   "pronta" quer dizer cortada, dobrada, e ja fora da carteira. E a resposta para
   quem ve o numero da carteira cair e quer saber qual ficha caiu.

   A barra da esquerda repete a mesma informacao em cor, para dar de ler a lista
   inteira de relance sem parar em cada linha. */
.item-etapa .situacao-etapa {
  flex: none;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--g-alto, #eef2f6);
  color: var(--tinta-fraca);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: uppercase;
  white-space: nowrap;
}
.item-etapa .situacao-etapa.pronta { background: #e4f5eb; color: #1f7a4d; }

.item-etapa.pronta     { border-left-color: var(--ok, #1f7a4d); }
.item-etapa.na-bancada { border-left-color: var(--aviso, #c98a12); }

/* Selecionada continua ganhando: a barra azul diz onde a pessoa esta, e perder
   isso para a cor da situacao faria a lista inteira parecer igual. */
.item-etapa.ativo { border-left-color: var(--azul); }

.separador { height: 1px; background: var(--borda); margin: var(--e3) var(--e4); }

/* ---------- tela de obras ---------- */

.painel-vazio {
  max-width: 520px;
  margin: 12vh auto 0;
  padding: var(--e7) var(--e5);
  text-align: center;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--r3);
  background: linear-gradient(180deg, #ffffff05, transparent);
}
.painel-vazio h1 { font-size: 19px; color: var(--g-texto); margin: 0 0 var(--e3); }
.painel-vazio p { max-width: 380px; margin: 0 auto var(--e5); font-size: 13px; color: var(--g-fraco); line-height: 1.7; }

.grade-obras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;

  /* 1100px prendia a grade em tres colunas e deixava meio monitor vazio à
     direita. 1560 cabe quatro e e o mesmo teto do resto das telas largas. */
  max-width: 1560px;

  /* Todos os cartoes da fileira com a mesma altura: e o que permite o rodape de
     cada um parar na mesma linha. */
  align-items: stretch;
}

/* ---------- ficha ---------- */

.ficha {
  max-width: 940px;
  margin: 0 auto;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 0 0 26px;
  overflow: hidden;
}

.ficha-topo {
  background: var(--navy);
  color: #fff;
  padding: 18px 26px;
}
.ficha-topo .faixa { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.ficha-topo h1 { margin: 0; font-size: 17px; letter-spacing: .6px; text-transform: uppercase; }
.ficha-topo h2 { margin: 4px 0 0; font-size: 14px; font-weight: 500; color: var(--azul-claro); }
.ficha-topo .contexto { font-size: 11.5px; color: #a8c4dd; text-align: right; line-height: 1.6; white-space: nowrap; }
.ficha-topo .etiqueta-etapa {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--azul);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
}

.faixa-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2px 20px;
  padding: 12px 26px;
  background: var(--azul-claro);
  border-bottom: 1px solid var(--azul-borda);
  font-size: 11.5px;
}
.faixa-meta div { line-height: 1.7; }
.faixa-meta b { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--azul); font-weight: 700; }

/* card de peca */

.grupo { padding: 0 26px; }

.cartao {
  margin-top: 18px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  overflow: hidden;
  break-inside: avoid;
}

.cartao-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--azul);
  color: #fff;
}
.cartao-barra .nome { font-size: 14px; font-weight: 700; }
.cartao-barra .descricao { flex: 1; font-size: 12px; color: #cfe3f5; }
.cartao-barra .unidades {
  padding: 2px 8px;
  border-radius: 10px;
  background: #ffffff2e;
  font-size: 11px;
  font-weight: 700;
}
/* Empurrado para o canto direito. Os pesos dos elementos ficam alinhados numa
   coluna so, e comparar 13,80 com 19,38 vira leitura de cima para baixo em vez
   de cacar o numero depois de um nome que muda de tamanho a cada linha. */
.cartao-barra .peso {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cartao.produzido .cartao-barra { background: var(--ok); }

.tabela-pecas { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabela-pecas th {
  padding: 6px 8px;
  background: #f4f7fa;
  border-bottom: 1px solid var(--linha);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--tinta-fraca);
  text-align: right;
  white-space: nowrap;
}
.tabela-pecas th:nth-child(1), .tabela-pecas th:nth-child(2),
.tabela-pecas th:nth-child(3) { text-align: left; }

.tabela-pecas td {
  padding: 5px 8px;
  border-bottom: 1px solid #eef2f6;
  text-align: right;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
/* escopo no tbody: senao o colspan do tfoot herda a largura da coluna do desenho */
.tabela-pecas tbody td:nth-child(1) { text-align: left; font-weight: 700; color: var(--navy); }
.tabela-pecas tbody td:nth-child(2) { text-align: left; width: 306px; padding: 6px 8px; }
.tabela-pecas tbody td:nth-child(3) { text-align: left; color: var(--tinta-fraca); }
.tabela-pecas tbody tr:last-child td { border-bottom: 0; }
.tabela-pecas tr.destacada td { background: #fff6d9; }

.tabela-pecas tfoot td {
  border-top: 1px solid var(--linha);
  border-bottom: 0;
  background: #f4f7fa;
  font-weight: 700;
  color: var(--navy);
  text-align: right;
}
.tabela-pecas tfoot td:first-child { text-align: left; }

.aviso-peca {
  display: block;
  margin-top: 3px;
  padding: 4px 7px;
  border-left: 3px solid var(--alerta);
  background: #fff7e8;
  color: #7a4a00;
  font-size: 10.5px;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}

.nota {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--azul-borda);
  background: #f7fafd;
  font-size: 11.5px;
  color: var(--tinta-fraca);
  line-height: 1.55;
}

/* rodape da etapa */

.resumo-etapa {
  margin: 22px 26px 0;
  padding: 14px 18px;
  background: var(--azul-claro);
  border: 1px solid var(--azul-borda);
  border-radius: 6px;
  break-inside: avoid;
}
.resumo-etapa h3 {
  margin: 0 0 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--azul);
}
.linha-bitolas { display: flex; flex-wrap: wrap; gap: 10px; }
.pilula-bitola {
  padding: 5px 11px;
  background: #fff;
  border: 1px solid var(--azul-borda);
  border-radius: 5px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.pilula-bitola b { color: var(--navy); }

.total-etapa {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--azul-borda);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
}
.total-etapa .valor { font-size: 20px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.total-etapa .margem { font-size: 11.5px; color: var(--azul); }

/* ---------- resumo geral de pecas ---------- */

.tabela-romaneio { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabela-romaneio th {
  padding: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-align: right;
}
.tabela-romaneio th:nth-child(1), .tabela-romaneio th:nth-child(2),
.tabela-romaneio th:nth-child(3), .tabela-romaneio th:last-child { text-align: left; }
.tabela-romaneio td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--linha);
  text-align: right;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.tabela-romaneio td:nth-child(1) { text-align: left; font-weight: 700; color: var(--navy); width: 40px; }
.tabela-romaneio td:nth-child(2) { text-align: left; width: 300px; }

/* A quantidade e o numero que a bancada procura na folha: quantas dessas eu
   corto. Fica em corpo maior porque, no meio de sete colunas de numero, o olho
   precisa de uma ancora — e a ancora e essa, nao o peso. */
.bloco-romaneio { padding-top: 4px; }

/* Duas colunas na mesma folha. O desenho grande empurrava o romaneio de uma
   etapa media para tres paginas — e ele ja aparece em tamanho cheio na ficha,
   logo acima. Aqui basta reconhecer a forma e ler a quantidade. */
.romaneio-duas-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
  align-items: start;
}

.tabela-romaneio.miuda { font-size: 11px; }
.tabela-romaneio.miuda th { padding: 6px 5px; font-size: 9px; }
.tabela-romaneio.miuda td { padding: 5px; }
.tabela-romaneio.miuda td:nth-child(1) { width: 24px; }
.tabela-romaneio.miuda td:nth-child(2) { width: 190px; }
.tabela-romaneio.miuda td.qtde-romaneio { font-size: 13px; }

@media (max-width: 900px) {
  .romaneio-duas-colunas { grid-template-columns: 1fr; }
}

.titulo-romaneio {
  margin: 0 0 10px;
  font-family: var(--fonte-tecnica);
  font-size: 15px;
  color: var(--navy);
}
.titulo-romaneio .margem { font-weight: 400; font-size: 12px; color: #5a6b7c; }

.tabela-romaneio td.qtde-romaneio {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.tabela-romaneio td:nth-child(3) { text-align: left; font-weight: 600; }
.tabela-romaneio td:last-child { text-align: left; font-size: 11px; color: var(--tinta-fraca); line-height: 1.5; }
.tabela-romaneio tr { break-inside: avoid; }

/* ---------- auditoria ---------- */

.bloco-auditoria {
  max-width: 940px;
  margin: 0 auto 18px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 18px 22px;
}
.bloco-auditoria h3 { margin: 0 0 12px; font-size: 13px; color: var(--navy); text-transform: uppercase; letter-spacing: .6px; }

.tabela-simples { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabela-simples th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--linha);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--tinta-fraca);
  text-align: right;
}
.tabela-simples th:first-child, .tabela-simples th:nth-child(2) { text-align: left; }
.tabela-simples td { padding: 6px 8px; border-bottom: 1px solid #eef2f6; text-align: right; font-variant-numeric: tabular-nums; }
.tabela-simples td:first-child, .tabela-simples td:nth-child(2) { text-align: left; }

.selo { padding: 2px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.selo.ok { background: #e4f5eb; color: var(--ok); }
.selo.atencao { background: #fff2dd; color: var(--alerta); }
.selo.erro { background: #fdeceb; color: var(--erro); }

.lista-texto { margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.75; color: var(--tinta); }
.lista-texto li { margin-bottom: 4px; }

/* ---------- desenhos ---------- */

/* O TRACO E A COTA SAO SEMPRE PRETOS — nunca a cor da empresa.

   O desenho E a instrucao: a linha diz a forma da barra, a cota diz a medida, e
   nao ha o que interpretar depois. Sair num verde, num amarelo ou num azul claro
   deixa a ficha bonita no monitor e ilegivel na bancada — pior ainda impressa,
   onde traco colorido sai mais fraco e cota pequena some.

   A cor da empresa pinta cabecalho, faixa e fundo. Ate aqui ela nao chega. */
.desenho svg { display: block; overflow: visible; }
.desenho svg .aco { fill: none; stroke: #14181d; stroke-width: 1.8; stroke-linejoin: miter; stroke-linecap: butt; }
.desenho svg .cota { stroke: #55606b; stroke-width: .5; }
.desenho svg text { font-family: "Segoe UI", sans-serif; font-size: 10px; fill: #55606b; }
.desenho svg text.medida { fill: #14181d; font-weight: 600; }
.desenho.grande svg .aco { stroke-width: 2.2; }
.desenho.grande svg text { font-size: 11px; }

/* ---------- diversos ---------- */

.barra-ferramentas {
  max-width: 940px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  gap: 10px;

  /* A barra quebra em duas linhas em vez de espremer os botoes. Numa tela de
     levantamento sao dez deles: sem isto, quem cede e o rotulo. */
  flex-wrap: wrap;
}
.barra-ferramentas .titulo-secao { font-size: 13px; color: var(--tinta-fraca); }
.barra-ferramentas .direita {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.botao-claro {
  /*
    ALTURA MINIMA, e nao altura fixa.

    Era "height: 30px". Numa barra cheia — a do levantamento tem dez botoes — o
    rotulo comprido quebrava em duas linhas dentro de uma caixa de trinta
    pixels, e a segunda linha saia CORTADA pela borda: "Enviar para produção"
    aparecia como "Enviar para produ—". O botao continuava funcionando, e
    parecia defeito de fonte.

    Com o minimo, a caixa cresce junto com o texto. E com "nowrap" ela nem
    chega la: o rotulo fica numa linha so e quem quebra e a BARRA, que agora
    tem "flex-wrap".
  */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--tinta);
  white-space: nowrap;
  cursor: pointer;
}
.botao-claro:hover { border-color: var(--azul); color: var(--azul); }
.botao-claro.marcado { background: var(--ok); border-color: var(--ok); color: #fff; }

.aviso-flutuante {
  position: fixed;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 4px 16px #0003;
  z-index: 50;
}
.aviso-flutuante.ruim { background: var(--erro); }

.rodape-ficha {
  margin: 24px 26px 0;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
  font-size: 10.5px;
  color: var(--tinta-fraca);
  line-height: 1.6;
}

.sem-resultado { padding: 40px; text-align: center; color: var(--tinta-fraca); }

/* ==========================================================================
   SISTEMA - login, clientes, usuarios e o quadro de producao
   ========================================================================== */

/* ---------- abas e identidade no topo ---------- */

.identidade { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }

/* ---------- portao: servidor, login, senha ---------- */

.portao {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 40px 20px;
  background: var(--navy);
}

.portao-caixa {
  width: 100%;
  max-width: 380px;
  padding: 32px 30px 26px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px #0000004d;
  text-align: center;
}

.portao-marca {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin: 0 auto 16px;
  border-radius: 10px;
  background: var(--navy);
  color: var(--azul-claro);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
}

.portao-caixa h1 { margin: 0 0 8px; font-size: 19px; color: var(--navy); }
.portao-caixa > p { margin: 0 0 20px; font-size: 13px; color: var(--tinta-fraca); line-height: 1.55; }

.portao-caixa label {
  display: block;
  margin-bottom: 14px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tinta-fraca);
}

.portao-caixa input {
  display: block;
  width: 100%;
  height: 38px;
  margin-top: 5px;
  padding: 0 12px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  color: var(--tinta);
  outline: none;
}
.portao-caixa input:focus { border-color: var(--azul); box-shadow: 0 0 0 3px #19578822; }

.portao-rodape {
  margin: 18px 0 0;
  font-size: 11.5px;
  color: var(--tinta-fraca);
}

.link {
  border: 0;
  background: none;
  padding: 0 2px;
  font-family: inherit;
  font-size: inherit;
  color: var(--azul);
  text-decoration: underline;
  cursor: pointer;
}

.dica { margin: -4px 0 14px; font-size: 11.5px; color: var(--tinta-fraca); text-align: left; }
.dica-linha { font-size: 11.5px; color: var(--tinta-fraca); }

/* ---------- atualização do aplicativo ---------- */

.barra-progresso {
  height: 6px;
  margin: 18px 0 6px;
  border-radius: 3px;
  background: var(--linha);
  overflow: hidden;
}
.barra-progresso span {
  display: block;
  height: 100%;
  background: var(--azul);
  border-radius: 3px;
}
.barra-progresso.indeterminada span {
  width: 40%;
  animation: correndo 1.2s ease-in-out infinite;
}
@keyframes correndo {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}

.notas-versao {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--azul-borda);
  background: #f7fafd;
  font-size: 12px;
  color: var(--tinta-fraca);
  text-align: left;
}

/* A atualização agora espera um clique, então esta tela tem botão como as outras
   do portão. Nada de ".botao fantasma" aqui: ele é branco, feito para a barra de
   cima, e sumiria no fundo branco desta caixa. */
.acoes-portao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.portao-dica {
  margin: 12px 0 0 !important;
  font-size: 11.5px;
  color: var(--tinta-fraca);
}

.erro-portao {
  margin: 0 0 4px !important;
  padding: 10px 12px;
  border-left: 3px solid var(--erro);
  background: #fdf3f3;
  font-size: 12.5px;
  color: var(--tinta);
  text-align: left;
}

/* código de referência do erro, sempre visível ao lado da mensagem */
.codigo-erro {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 4px;
  background: #ffffff2e;
  font-family: Consolas, "Courier New", monospace;
  font-size: 11.5px;
  letter-spacing: .3px;
}

.botao.largo { width: 100%; height: 38px; font-size: 14px; }

/* ---------- folha: bloco branco de conteudo ---------- */

.folha {
  max-width: 1000px;
  margin: 0 auto var(--e3);
  padding: var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--r2);
  background:
    linear-gradient(180deg, #ffffff05, transparent 120px),
    var(--g-base);
  box-shadow: inset 0 1px 0 var(--luz-topo), var(--sombra1);
}
.folha h2 {
  margin: 0 0 var(--e4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--g-fraco);
}

.vazio-interno { margin: 0; padding: 24px 0; text-align: center; color: var(--tinta-fraca); font-size: 13px; }

/* .faixa-cliente saiu: a capa do cadastro nao usa mais grade de rotulos. */

/* ---------- formularios ---------- */

.grade-campos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.grade-campos .col-2 { grid-column: span 2; }
.grade-campos .col-3 { grid-column: span 3; }

.grade-campos label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tinta-fraca);
}

.grade-campos input,
.grade-campos select,
.grade-campos textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--tinta);
  background: #fff;
  outline: none;
  resize: vertical;
}
.grade-campos input:focus,
.grade-campos select:focus,
.grade-campos textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px #19578822; }
.grade-campos input:disabled { background: #f4f7fa; color: var(--tinta-fraca); }

.obrigatorio { color: var(--erro); }

.acoes-form { display: flex; gap: 10px; margin-top: 20px; }
.acoes-form .perigo { margin-left: auto; border-color: #f0c9c6; color: var(--erro); }
.acoes-form .perigo:hover { background: #fdeceb; border-color: var(--erro); }

/* ---------- cartao de cliente ---------- */

.cartao-cliente {
  /*
    COLUNA, e nao um monte de blocos empilhados.

    Cartao com selo de "preenchido pelo cliente" era mais alto que o vizinho sem
    selo, e o rodape de cada um parava numa altura diferente: numa fileira de
    tres, os tres pesos ficavam desalinhados e a grade parecia torta. Em coluna,
    com o rodape empurrado para o pe (ver ".rodape" logo abaixo), as fileiras
    alinham sozinhas.
  */
  display: flex;
  flex-direction: column;

  padding: var(--e4) var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--r2);
  background: var(--g-base);
  box-shadow: inset 0 1px 0 var(--luz-topo), var(--sombra1);
  cursor: pointer;
  transition: transform var(--rapido), box-shadow var(--rapido), border-color var(--rapido);
}
.cartao-cliente:hover {
  transform: translateY(-2px);
  border-color: var(--borda-forte);
  box-shadow: inset 0 1px 0 var(--luz-topo), var(--sombra2);
}
.cartao-cliente h3 { margin: 0 0 6px; font-size: 15px; color: var(--g-texto); }
.cartao-cliente .linha { font-size: 12.5px; color: var(--g-fraco); line-height: 1.6; }
.cartao-cliente .rodape {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--linha);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--tinta-fraca);
}

.etiqueta-dono {
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--azul-claro);
  color: var(--azul);
  font-size: 10.5px;
  font-weight: 700;
}

/* ---------- tabela de listagem ---------- */

.tabela-lista { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-lista th {
  padding: 8px;
  border-bottom: 1px solid var(--borda);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--tinta-fraca);
  text-align: left;
  white-space: nowrap;
}
.tabela-lista th.num, .tabela-lista td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-lista td { padding: var(--e3); border-bottom: 1px solid var(--borda); color: var(--g-medio); }
.tabela-lista td.forte { color: var(--g-texto); font-weight: 600; }
.tabela-lista tr:hover td { background: var(--g-alto); }
.tabela-lista tr.inativa td { opacity: .5; }
.acoes-linha { text-align: right; white-space: nowrap; }

.botao-mini {
  height: 26px;
  padding: 0 10px;
  margin-left: 5px;
  border: 1px solid var(--linha);
  border-radius: 5px;
  background: #fff;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--tinta);
  cursor: pointer;
}
.botao-mini:hover { border-color: var(--azul); color: var(--azul); }
.botao-mini.ok:hover { border-color: var(--ok); color: var(--ok); }

.botao-claro.destaque { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
.botao-claro.destaque:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.botao-claro.largo { width: 100%; margin-bottom: 12px; text-align: left; }

/* ---------- quadro de producao ---------- */

.quadro {
  display: grid;
  grid-auto-flow: column;

  /* A coluna ocupa a parte dela da tela. Ja teve teto de 310px, para os cartoes
     nao ficarem quadrados numa tela larga — e o remedio foi pior que a doenca:
     com quatro colunas estreitas, nome de cliente e botao passaram a sair
     cortados. O aperto agora e resolvido DENTRO do cartao, nao encolhendo a
     coluna. */
  grid-auto-columns: minmax(290px, 1fr);
  gap: 16px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 12px;
}

/* ==========================================================================
   AS COLUNAS DO QUADRO ROLAM POR DENTRO
   --------------------------------------------------------------------------
   A pagina crescia junto com a coluna mais cheia: quarenta fichas em "A
   produzir" e o quadro virava tres telas de altura. E ai arrastar parava de
   funcionar, porque arrastar exige as DUAS pontas visiveis — quem segurava uma
   ficha do fim da coluna nao enxergava mais "Cortando".

   Agora cada coluna tem a altura da tela e rola por dentro. O cabecalho —
   titulo, contagem, atraso e peso — fica parado no alto, entao da para saber
   em qual coluna se esta soltando mesmo com a pilha rolada.

   A mesma correcao ja feita no quadro de entregas, pelo mesmo motivo.
   ========================================================================== */

.coluna-kanban {
  display: flex;
  flex-direction: column;
  background: #e6ecf2;
  border-radius: 10px;
  min-height: 200px;

  /* Desconta a barra de ferramentas e o respiro de baixo. O piso de 320px
     impede que numa janela baixa a coluna fique menor que um cartao. */
  max-height: max(320px, calc(100vh - 190px));
}

.coluna-kanban header { flex: none; }

.coluna-kanban header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
}
.coluna-kanban h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--navy);
}
.coluna-kanban .contagem {
  display: grid;
  place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.coluna-kanban .peso-coluna {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}

.pilha {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 10px 12px;
  min-height: 80px;
  border-radius: 8px;

  /* A UNICA parte que rola. O "min-height: 0" e o que deixa um filho de flex
     encolher abaixo do conteudo — sem ele o navegador estica a coluna e a
     rolagem volta a ser a da pagina inteira. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/*
  FICHA NAO ENCOLHE.

  A pilha e uma coluna flex, e item de flex encolhe quando a soma passa da
  altura. Quem tem "overflow: hidden" — o cartao com tarja de equipe — encolhe
  ATE ZERO, porque overflow diferente de "visible" desliga o
  "min-height: auto" que segura os outros. O resultado era uma coluna cheia em
  que as fichas de equipe viravam tiras de 26px com o conteudo cortado, e so
  elas: as sem equipe ficavam inteiras.

  Rolar e o certo aqui: a pilha ja rola sozinha.
*/
.pilha > .cartao-kanban { flex: none; }

.pilha::-webkit-scrollbar { width: 8px; }
.pilha::-webkit-scrollbar-thumb { background: #b9c6d4; border-radius: 4px; }
.pilha::-webkit-scrollbar-track { background: transparent; }

.cartao-kanban {
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--linha);
  border-left: 4px solid var(--azul);
  border-radius: 7px;
  cursor: grab;
  box-shadow: 0 1px 3px #10345414;
}
.cartao-kanban:active { cursor: grabbing; }
.cartao-kanban.arrastando { opacity: .4; }
.cartao-kanban.entregue { border-left-color: var(--ok); cursor: default; }

/* O peso NAO quebra: "1.668 kg" virava "1.668" numa linha e "kg" na outra
   sempre que o codigo da etapa era comprido, e o cartao ganhava uma linha de
   altura por causa de um espaco. */
.cartao-kanban .obra { margin: 0 0 4px; font-size: 11.5px; color: var(--tinta-fraca); }
.cartao-kanban .desc { margin: 0; font-size: 12px; color: var(--tinta); line-height: 1.4; }
.cartao-kanban .obs {
  margin: 8px 0 0;
  padding: 5px 8px;
  border-left: 3px solid var(--alerta);
  background: #fff7e8;
  font-size: 11px;
  color: #7a4a00;
  line-height: 1.4;
}

/* ---------- prazos, fila, compra e ritmo ---------- */

/* Prazo vencido precisa de cor. O painel é lido de manhã, de pé, com o café na
   mão — e o que está em risco tem que saltar antes de qualquer número. */
/* .p-prazos saiu: as caixas viraram os baldes da faixa de hoje. */

/* a fila */
.tabela-fila { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-fila td { padding: 9px 8px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela-fila tr { cursor: pointer; }
.tabela-fila tr:hover td { background: var(--g-alto); }
.tabela-fila tr:last-child td { border-bottom: 0; }

.fila-quem b { display: block; color: var(--g-texto); font-weight: 600; }
.fila-quem small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--g-fraco); }
.fila-kg { width: 90px; color: var(--g-medio); white-space: nowrap; }
.fila-onde { width: 140px; font-size: 12px; color: var(--g-fraco); }

.fila-prazo {
  width: 110px;
  text-align: right;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--g-medio);
  white-space: nowrap;
}
.fila-prazo.grave   { color: #ff9d8f; }
.fila-prazo.atencao { color: #ffce85; }
:root[data-tema="claro"] .fila-prazo.grave   { color: #a3271b; }
:root[data-tema="claro"] .fila-prazo.atencao { color: #7a4a00; }
.fila-prazo.sem     { color: var(--g-fraco); font-weight: 400; font-style: italic; }

/* aço a comprar */
.tabela-compra { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 10px; }
.tabela-compra td { padding: 6px 4px; border-bottom: 1px solid var(--borda); color: var(--g-medio); }
.tabela-compra tr:last-child td { border-bottom: 0; }
.tabela-compra .num { text-align: right; white-space: nowrap; }
.tabela-compra .forte { color: var(--g-texto); font-weight: 600; }
.tabela-compra .fraco { width: 96px; font-size: 12px; color: var(--g-fraco); }

/* ritmo */
.grafico-ritmo { display: block; width: 100%; height: auto; margin: 6px 0 4px; }
.grafico-ritmo .grade { stroke: var(--borda); stroke-width: 1; }
.grafico-ritmo .r-dia { font-size: 8px; fill: var(--g-fraco); }

.r-entrou   { fill: #85B7EB; }
.r-enviado  { fill: #EF9F27; }
.r-produziu { fill: #5DCAA5; }
.r-saiu     { fill: #5DCAA5; }

/* A semana em curso ainda não terminou. Ela aparece com a mesma cor, mais
   apagada: está no gráfico como "o que está acontecendo", não como resultado
   fechado — e não entra na conta da média. */
.grafico-ritmo rect.emCurso { opacity: .45; }

/* A régua do que é normal: a média de entrega das semanas fechadas. */
.grafico-ritmo .linha-media {
  stroke: var(--g-fraco);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: .7;
}

/* ---------- ritmo contra a meta ---------- */

/* Uma porcentagem grande e uma barra. Quem manda na fábrica quer saber se está
   rápido ou devagar antes de ler qualquer número — a cor responde de longe. */
.ritmo-marca { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 10px; }
.ritmo-num { font-size: 34px; font-weight: 700; line-height: 1; color: var(--g-texto); }
.ritmo-rot { font-size: 12px; color: var(--g-fraco); }

.ritmo-marca.bom     .ritmo-num { color: #1D9E75; }
.ritmo-marca.atencao .ritmo-num { color: #b5851f; }
.ritmo-marca.grave   .ritmo-num { color: #c0392b; }

/* ---------- barras do ritmo, período a período ---------- */

/* Porcentagem responde "como estou agora" e esquece o resto. A barra responde
   "como venho indo" — e é aí que aparece a semana que caiu e a sequência de três
   abaixo da linha. Verde passou da meta, âmbar não chegou: sem legenda. */
.grafico-ritmo-prod { display: block; width: 100%; height: auto; margin: 6px 0 12px; }
.grafico-ritmo-prod .grade { stroke: var(--borda); stroke-width: 1; }

.grafico-ritmo-prod .rp-barra.bateu  { fill: #1D9E75; }
.grafico-ritmo-prod .rp-barra.faltou { fill: #EF9F27; }
.grafico-ritmo-prod .rp-barra.emCurso { opacity: .55; }

.grafico-ritmo-prod .linha-meta {
  stroke: var(--g-texto);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
  opacity: .55;
}
.grafico-ritmo-prod .rp-meta  { font-size: 12px; font-weight: 700; fill: var(--g-medio); }
.grafico-ritmo-prod .rp-rot   { font-size: 12px; fill: var(--g-fraco); }

.grafico-ritmo-prod .rp-valor { font-size: 12px; font-weight: 700; }
.grafico-ritmo-prod .rp-valor.dentro { fill: #fff; }
.grafico-ritmo-prod .rp-valor.fora   { fill: var(--g-medio); }

/* ---------- o bloco do ritmo ocupa a largura toda ---------- */

/* Gráfico à esquerda, números à direita: no bloco largo, empilhar deixaria uma
   faixa de vazio do lado do gráfico e empurraria a tabela para fora da vista. */
.ritmo-bloco .ritmo-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  align-items: start;
}
.ritmo-bloco .ritmo-num { font-size: 40px; }
.ritmo-bloco .tabela-compra { margin-top: 0; font-size: 13.5px; }
.ritmo-bloco .tabela-compra td { padding: 8px 4px; }

@media (max-width: 900px) {
  .ritmo-bloco .ritmo-corpo { grid-template-columns: 1fr; }
}

/* ---------- as médias, acima do gráfico ---------- */

/* O gráfico mostra a variação; a média diz o que é normal. Sem ela, cada semana
   parece boa ou ruim isolada, sem régua para comparar. */
.medias-semana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 6px 0 16px;
}
.media-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r1);
  background: var(--g-alto);
}
.media-rot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--g-fraco);
}
.media-num { font-size: 19px; font-weight: 700; color: var(--g-texto); line-height: 1.2; }
.media-pe  { font-size: 10.5px; color: var(--g-fraco); }

/* A legenda separada saiu: cada média já carrega a bolinha da sua cor, e uma
   legenda repetindo as mesmas três palavras logo abaixo era mobília. */
.p-cor { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }
.p-cor.r-entrou   { background: #85B7EB; }
.p-cor.r-enviado  { background: #EF9F27; }
.p-cor.r-produziu { background: #5DCAA5; }
.p-cor.r-saiu     { background: #5DCAA5; }

/* ---------- plano de corte ---------- */

/* Mora dentro de .ficha, então herda a paleta de papel: isto é documento de
   bancada, e sai na impressora junto com a ficha. */
.tabela-corte { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabela-corte th {
  padding: 7px 10px;
  border-bottom: 1px solid var(--linha);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  text-align: left;
  color: var(--tinta-fraca);
}
.tabela-corte td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
  color: var(--tinta);
}
.tabela-corte .num { text-align: right; }
.tabela-corte tbody tr:last-child td { border-bottom: 0; }

.corte-qtde { font-size: 15px; font-weight: 700; color: #14181d; white-space: nowrap; }
.corte-lista { font-size: 11.5px; line-height: 1.5; color: var(--tinta-fraca); white-space: nowrap; }

.tabela-corte tfoot td {
  border-top: 2px solid var(--ficha-medio, #103454);
  background: var(--ficha-claro, #eef4fa);
  font-weight: 700;
  color: #14181d;
}

/* A barra em escala. Sem preserveAspectRatio ela estica na largura da coluna,
   que é o que se quer: o comprimento relativo dos pedaços é a informação. */
.corte-barra { display: block; }
/* O pedaco e fundo: ai a cor da empresa entra, no tom mais claro dela. O
   contorno e o numero nao — sao traco e cota, e seguem pretos. */
.corte-barra .corte-pedaco { fill: var(--ficha-claro, #e8eef4); stroke: #14181d; stroke-width: .8; }
.corte-barra .corte-num { font-size: 9px; font-weight: 700; fill: #14181d; }
.corte-barra .corte-sobra { fill: #f3ded9; stroke: #c0392b; stroke-width: .8; stroke-dasharray: 2 2; }
.corte-barra .corte-sobra.util { fill: #fdf0d5; stroke: #b5851f; }

.sobra-util  { color: #8a6413; font-weight: 700; }
.sobra-ponta { color: #a3271b; font-weight: 700; }

.nota-emenda { border-left: 3px solid #c0392b; padding-left: 10px; }

/* ---------- quadro de opções da tela inicial ---------- */

/* Cartões marcáveis, e não uma lista de caixinhas: a pessoa está montando a
   própria tela, e cada opção precisa dizer o que faz antes de ser escolhida. */
.quadro-opcoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.opcao-bloco {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--r2);
  background: var(--g-base);
  cursor: pointer;
  transition: border-color var(--rapido), background var(--rapido);
}
.opcao-bloco:hover { border-color: var(--borda-forte); background: var(--g-alto); }
.opcao-bloco.ligada { border-color: var(--acento); background: var(--acento-veu); }

.opcao-bloco input { margin: 2px 0 0; accent-color: var(--acento); cursor: pointer; }

.opcao-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.opcao-texto b { font-size: 13px; color: var(--g-texto); }
.opcao-texto small { font-size: 11.5px; line-height: 1.4; color: var(--g-fraco); }

/* ---------- pedido e prazo ---------- */

/* O quadro é lido em pé, de relance. Prazo vencido precisa de cor, não de
   mais uma linha cinza que ninguém enxerga no meio do cartão. */
.selos-pedido {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.selo-pedido, .selo-prazo {
  padding: 2px 7px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-pilula);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  color: var(--g-medio);
  background: var(--g-alto);
}
.selo-prazo.perto {
  border-color: #c98a1a;
  background: #fff4e0;
  color: #7a4a00;
}
.selo-prazo.atrasado {
  border-color: #c0392b;
  background: #fdeceb;
  color: #a3271b;
}
.cartao-kanban footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid #eef2f6;
  font-size: 10.5px;
  color: var(--tinta-fraca);
}

/* ---------- corrigir a forma de uma peça ---------- */

/* A linha só convida ao clique quando dá para corrigir — na ficha do quadro, não. */
.tabela-pecas tr.corrigivel { cursor: pointer; }
.tabela-pecas tr.corrigivel:hover td { background: #eef6fd; }

.selo-corrigida {
  margin-left: 5px;
  color: var(--azul);
  font-size: 12px;
}

.fundo-painel {
  position: fixed;
  inset: 0;
  background: #10345455;
  z-index: 40;
}

.painel-peca {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 100%;
  z-index: 41;
  padding: var(--e5);
  overflow-y: auto;
  border-left: 1px solid var(--borda);
  border-radius: var(--r3) 0 0 var(--r3);
  background: var(--g-base);
  color: var(--g-texto);
  box-shadow: var(--sombra3);
}

.painel-peca header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.painel-peca h3 { margin: 0; font-size: 17px; color: var(--navy); }

.painel-peca .fixos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin: 0 0 6px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--fundo);
}
.painel-peca .fixos dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--tinta-fraca); }
.painel-peca .fixos dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--navy); }

.painel-peca .previa {
  display: grid;
  place-items: center;
  min-height: 130px;
  margin: 16px 0 8px;
  padding: 10px;
  border: 1px solid var(--linha);
  border-radius: 6px;
}

/* O aviso de fechamento é o que transforma a correção em conferência: sem ele a
   pessoa mexe nas cotas sem saber se ainda somam o comprimento da peça. */
.painel-peca .confere {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
}
.painel-peca .confere.ok   { background: #eaf6ef; color: var(--ok); }
.painel-peca .confere.fora { background: #fdf3e7; color: var(--alerta); }

/* A conta da peça digitada, à vista enquanto se digita. Na correção o peso vem
   pronto da prancha; aqui ele nasce aqui, e ver o número mudar é o que permite
   perceber o zero a mais antes de salvar. */
.painel-peca .conta-peca {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--azul-claro);

  /* "--tinta", e nao "--navy".

     No tema escuro "--navy" aponta para --g-alto, que e cor de SUPERFICIE, nao
     de texto. Aqui ele pintava #242424 em cima de #2e2e2e: o titulo do elemento
     sumia na janela de enviar para producao, e so a linha de baixo — que usa
     --tinta-fraca — continuava legivel. "--tinta" e o token de texto e vira
     claro sozinho no escuro. */
  color: var(--tinta);
  font-size: 13px;
}
.painel-peca .conta-peca b,
.painel-peca .conta-peca .forte { font-size: 16px; font-weight: 700; color: var(--tinta); }
.painel-peca .conta-peca small { width: 100%; color: var(--tinta-fraca); font-size: 11px; }

.painel-peca .campo-inline { margin-top: 14px; }
.painel-peca .campo-inline select,
.painel-peca .campo-inline input,
.painel-peca .campo-inline textarea {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: 5px;
  padding: 0 10px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  color: var(--tinta);
}
/* a observação é texto corrido: cresce e mantém o respiro de cima */
.painel-peca .campo-inline textarea {
  height: auto;
  padding: 8px 10px;
  line-height: 1.45;
  resize: vertical;
}
.painel-peca .cotas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.painel-peca #inverterGanchos { margin-top: 16px; text-align: center; }
.painel-peca .acoes-form { margin-top: 20px; }

@media print {
  .fundo-painel, .painel-peca { display: none !important; }
}

/* ---------- exclusão: o que não volta atrás ---------- */

/* O botão que apaga de vez precisa parecer o que é. ".destaque" sozinho é azul —
   sem esta regra, "Excluir para sempre" sairia com a mesma cor de "Salvar". */
.botao-claro.perigo.destaque {
  background: var(--erro);
  border-color: var(--erro);
  color: #fff;
  font-weight: 600;
}
.botao-claro.perigo.destaque:hover { background: #8f1e17; border-color: #8f1e17; }

.botao-mini.perigo { color: var(--erro); }
.botao-mini.perigo:hover { border-color: var(--erro); color: var(--erro); background: #fdeceb; }

.titulo-perigo { color: var(--erro) !important; }

.aviso-perigo {
  margin: 10px 0 16px;
  padding: 10px 12px;
  border-left: 3px solid var(--erro);
  background: #fdeceb;
  font-size: 12.5px;
  font-weight: 600;
  /* Cor fixa, e não a tinta do tema: o fundo rosa é fixo, então no tema escuro
     a tinta clara escrevia branco sobre rosa e o aviso ficava ilegível — logo o
     aviso, que é o texto que menos pode deixar de ser lido. */
  color: #7a1a15;
}
.aviso-perigo b { color: #5e120e; }
.aviso-perigo small { color: #8a3a34; font-weight: 400; }

/* ---------- movimento (o que a janela do servidor mostrava) ---------- */

.linha-ferramentas {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 16px 0 12px;
}

.campo-inline {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tinta-fraca);
}
.campo-inline select {
  display: block;
  height: 32px;
  min-width: 160px;
  margin-top: 5px;
  padding: 0 8px;
  border: 1px solid var(--linha);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: var(--tinta);
}

/* Um dia movimentado passa de trezentas linhas. Sem altura máxima, o bloco de
   backup e o de versão ficariam a uma rolagem inalcançável do topo. */
.rolagem-movimento {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--linha);
  border-radius: 6px;
}
.rolagem-movimento thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.tabela-lista td.hora-registro {
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  color: var(--tinta-fraca);
}
.tabela-lista td.fraco { color: #8b9aa8; font-size: 12px; }

/* ==========================================================================
   IMPRESSAO - A4
   ========================================================================== */

@page {
  size: A4 portrait;
  margin: 12mm 10mm;
}

@media print {
  html, body { height: auto; overflow: visible; background: #fff; }

  .barra-topo,
  .lateral,
  .barra-ferramentas,
  .aviso-flutuante,
  .acoes-form,
  .corte-abrir,
  /* Mover, Excluir e o x da posicao nao estavam nesta lista: saiam impressos na
     ficha da bancada, ao lado do nome do elemento. */
  [data-mover-card],
  [data-excluir-card],
  .apagar-peca,
  .acoes-linha { display: none !important; }

  /* O corte nao se parte no meio: meia secao impressa nao serve para ninguem. */
  .faixa-corte { break-inside: avoid; }

  .corpo { display: block; height: auto; }
  .conteudo { overflow: visible; padding: 0; }

  .ficha, .bloco-auditoria {
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding-bottom: 0;
  }

  .ficha-topo, .faixa-meta, .cartao-barra, .resumo-etapa,
  .tabela-pecas th, .tabela-pecas tfoot td, .tabela-romaneio th, .selo {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .ficha-para-impressao + .ficha-para-impressao { break-before: page; }

  .cartao, .resumo-etapa, .tabela-romaneio tr, .bloco-auditoria { break-inside: avoid; }

  /* O titulo do romaneio nao fica sozinho no pe da folha: se a tabela nao cabe
     abaixo dele, os dois viram a pagina juntos. */
  .titulo-romaneio { break-after: avoid; }
  thead { display: table-header-group; }

  body { font-size: 10.5px; }
  .tabela-pecas { font-size: 9.5px; }
  .tabela-romaneio { font-size: 10.5px; }

  /* ---------- caber nos 190 mm uteis do A4 ----------

     A ficha saia com 876 px numa folha que oferece 718: as duas ultimas colunas
     — "Comp. total" e "Peso" — eram cortadas na impressao, e o peso e o numero
     que a bancada confere.

     A conta nao precisa de letra menor nem de desenho menor. O que empurrava a
     largura eram os CABECALHOS: "Comp. unit. (cm)" numa linha so reservava 117 px
     para uma coluna cujo conteudo sao cinco digitos. Deixando o titulo quebrar em
     duas linhas a tabela cai de 799 para 662 px — e o desenho continua nos 290 px
     originais, com as cotas do mesmo tamanho. Encolher o desenho encolheria as
     cotas junto, e cota ilegivel na bancada e pior do que folha cortada. */

  .tabela-pecas th,
  .tabela-lista th,
  .tabela-simples th,
  .tabela-romaneio th { white-space: normal; }

  /* O cabecalho quebra; o CONTEUDO nao. "CA-50" partido em "CA-" e "50" em
     linhas diferentes e bitola lida errada na bancada. Nao custa largura: a
     tabela fecha nos mesmos 664 px com ou sem isto. */
  .tabela-pecas td:nth-child(3),
  .tabela-pecas td:nth-child(4) { white-space: nowrap; }

  /* ---------- densidade: mais peca por folha ----------

     Cabendo no A4, a ficha gastava 40% da altura de cada elemento com MOLDURA —
     barra do nome, cabecalho da tabela, rodape do subtotal e o espaco entre um
     elemento e o proximo — para 60% de linha de peca. Com 25 elementos isso dava
     12,6 folhas, e o cabecalho sozinho, repetido 25 vezes, valia mais de uma.

     Apertar a moldura tira 2 folhas em 12 sem encostar no conteudo.

     O QUE NAO FOI APERTADO: o desenho. Encolher ele de 42 para 34 px tiraria
     outras 2 folhas — e levaria a cota de 10 px para 8. A cota e a medida que a
     bancada le para dobrar o ferro; folha a mais custa papel, cota ilegivel custa
     peca errada. */

  .tabela-pecas th {
    padding: 3px 6px;
    font-size: 8.5px;
    line-height: 1.05;
  }
  .tabela-pecas td { padding: 2px 6px; }
  .tabela-pecas tfoot td { padding: 3px 6px; }

  /* A celula do desenho tem regra propria e mais especifica (nth-child(2)), com
     6 px em cima e embaixo. Era ela que mandava na altura da linha: o desenho tem
     42 px, e a linha saia com 55. Sem esta linha o aperto acima nao encostava na
     unica celula que importava. */
  .tabela-pecas tbody td:nth-child(2) { padding: 2px 6px; }

  .cartao { margin-top: 8px; }
  .cartao-barra { padding: 4px 12px; }

  /* Nada dentro da ficha pode passar da folha. O desenho tem viewBox, entao
     encolhe proporcional se algum dia faltar espaco — e o ultimo recurso, nao o
     primeiro. */
  .ficha, .ficha table { max-width: 100%; }
  .ficha table { table-layout: auto; }
  .ficha svg { max-width: 100%; height: auto; }

  /* Rolagem horizontal e coisa de tela: no papel ela vira conteudo escondido. */
  .folha, .folha:has(> .tabela-lista) { overflow: visible; }
}

/* ==========================================================================
   Painel — placas de número e barras

   As barras sao div com largura em porcentagem, nao biblioteca de grafico: o
   aplicativo roda dentro do .exe, sem internet e com origem travada, entao CDN
   nao e opcao. De quebra, barra de CSS imprime igual ao que aparece na tela.
   ========================================================================== */

tr.clicavel { cursor: pointer; }
tr.clicavel:hover { background: var(--azul-claro); }

/* ==========================================================================
   Seletor de pasta do servidor
   ========================================================================== */

.campo-com-botao { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.campo-com-botao input { flex: 1 1 96px; min-width: 96px; }
.campo-com-botao .botao-claro { flex: none; white-space: nowrap; }

.caminho-atual {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--fundo);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  word-break: break-all;
}

.lista-pastas {
  margin-top: 10px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--linha);
  border-radius: 6px;
}

.item-pasta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--linha);
  background: var(--papel);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.item-pasta:last-child { border-bottom: 0; }
.item-pasta:hover { background: var(--azul-claro); }
.item-pasta .livre { font-size: 11px; color: var(--tinta-fraca); white-space: nowrap; }

/* ---------- projeto em PDF, no cadastro do cliente ---------- */

.cabecalho-bloco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.cabecalho-bloco h2 { margin: 0; }

/* O nome do arquivo e um botao, nao um link: nao existe URL para onde ir. Quem
   abre o PDF e a janela do aplicativo, no leitor da propria maquina. */
.link-anexo {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--azul);
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}
.link-anexo:hover { color: var(--navy); }

/* ==========================================================================
   Tela de entrada

   Cinza grafite, sem cor de acento gritando. Confianca em tela de login vem de
   sobriedade e alinhamento, nao de brilho: quanto menos a tela tenta impressionar,
   mais ela parece um sistema serio. O unico ponto de cor e o indicador de estado
   do servidor, que e informacao, nao enfeite.

   A paleta vive so aqui dentro. O resto do aplicativo continua claro.
   ========================================================================== */

.entrada {
  --grafite: #17191d;
  --grafite-2: #1e2126;
  --grafite-3: #262a30;
  --risco: #333840;
  --texto: #e8eaed;
  --texto-fraco: #949ba5;
  --aco: #c9d1d9;

  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--grafite);
  color: var(--texto);
  overflow: auto;
}

/* ---------- lado esquerdo: a vitrine ---------- */

.entrada-vitrine {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 48px;
  background:
    radial-gradient(120% 90% at 15% 0%, #23272e 0%, rgba(35,39,46,0) 60%),
    linear-gradient(160deg, #1c1f24 0%, #15171b 100%);
  border-right: 1px solid var(--risco);
}

/* Trama fina de linhas: da textura industrial sem imagem nenhuma dentro do .exe. */
.entrada-vitrine::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events: none;
}

.entrada-marca { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }

.entrada-sigla {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--risco);
  border-radius: 7px;
  background: var(--grafite-3);
  color: var(--aco);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .5px;
}

.entrada-produto {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  color: var(--texto-fraco);
}

.entrada-chamada { position: relative; z-index: 1; max-width: 460px; }
.entrada-chamada h1 {
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.3px;
}
.entrada-chamada p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--texto-fraco); }

.entrada-estado {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid var(--risco);
  font-size: 11.5px;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}
.entrada-estado .ponto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4d9d78;
  box-shadow: 0 0 0 3px rgba(77,157,120,.16);
}
.entrada-estado .ponto.fora { background: #b0873f; box-shadow: 0 0 0 3px rgba(176,135,63,.16); }
.entrada-estado .entrada-versao { margin-left: auto; }

/* ---------- lado direito: o formulario ---------- */

.entrada-forma {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 48px;
  background: var(--grafite-2);
}

.engrenagem {
  position: absolute;
  top: 26px; right: 30px;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--risco);
  border-radius: 7px;
  background: transparent;
  color: var(--texto-fraco);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.engrenagem:hover { color: var(--texto); border-color: #495059; background: var(--grafite-3); }
.engrenagem.ativa { color: var(--texto); border-color: #495059; background: var(--grafite-3); }

.entrada-caixa { width: 100%; max-width: 340px; margin: 0 auto; }
.entrada-caixa h2 { margin: 0 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -.2px; }
.entrada-ajuda { margin: 0 0 22px; font-size: 12.5px; line-height: 1.65; color: var(--texto-fraco); }

.entrada-caixa label {
  display: block;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

/* O campo segue os tokens, NAO uma cor cravada.

   Ele nasceu quando esta tela era escura de ponta a ponta, com "background:
   #16181c". Depois o painel passou a seguir o tema — e no tema claro sobrava
   uma caixa preta com texto escuro dentro: dava para digitar a senha sem
   enxergar uma letra.

   --grafite-3 e --texto sao os nomes locais desta tela; la em "entrada e painel
   passam a usar a mesma regua" eles apontam para os tokens do tema. Usando-os
   aqui, o campo acompanha claro e escuro sem mais nenhuma regra. */
.entrada-caixa input {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 7px;
  padding: 0 13px;
  border: 1px solid var(--risco);
  border-radius: 7px;
  background: var(--grafite-3);
  color: var(--texto);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.entrada-caixa input:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-veu);
}
.entrada-caixa input::placeholder { color: var(--texto-fraco); opacity: .75; }

.entrada-caixa .botao.primario {
  height: 42px;
  margin-top: 8px;
  border: 0;
  border-radius: 7px;
  background: var(--aco);
  color: #1a1d21;
  font-weight: 600;
  font-size: 14px;
}
.entrada-caixa .botao.primario:hover { background: #fff; }

.botao-vazado {
  height: 38px;
  margin-top: 8px;
  border: 1px solid var(--risco);
  border-radius: 7px;
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.botao-vazado:hover { color: var(--texto); border-color: #495059; }
.botao-vazado.largo { display: block; width: 100%; }

/* ---------- rodape: Claude Desktop ---------- */

.entrada-rodape {
  position: absolute;
  left: 48px; right: 48px; bottom: 32px;
  display: flex;
  justify-content: center;
}

.botao-claude {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  max-width: 340px;
  padding: 11px 14px;
  border: 1px solid var(--risco);
  border-radius: 8px;
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.botao-claude:hover { color: var(--texto); border-color: #495059; background: var(--grafite-3); }
.botao-claude b { display: block; font-size: 13px; font-weight: 600; color: var(--texto); }
.botao-claude small { display: block; margin-top: 1px; font-size: 11px; line-height: 1.4; }

/* Janela estreita: a vitrine sai da frente e sobra a coluna do formulario. */
@media (max-width: 860px) {
  .entrada { grid-template-columns: 1fr; }
  .entrada-vitrine { display: none; }
}

/* ---------- levantamento: etapa x bitola ---------- */

.tabela-levantamento {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.tabela-levantamento th,
.tabela-levantamento td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--linha);
  text-align: left;
  vertical-align: middle;
}

.tabela-levantamento thead th {
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  white-space: nowrap;
}

.tabela-levantamento .num { text-align: right; white-space: nowrap; }
.tabela-levantamento .forte { font-weight: 700; color: var(--navy); }

/* Zero nao e numero aqui: e "esta bitola nao entra nesta etapa". Cinza claro para a
   coluna cheia de tracos nao competir com os valores que importam. */
.tabela-levantamento .vazio { color: #b6bfc8; }

.tabela-levantamento .codigo-etapa {
  font-weight: 700;
  font-size: 11px;
  color: var(--navy);
  white-space: nowrap;
}

.tabela-levantamento tbody tr:nth-child(even) { background: #f7fafc; }

.tabela-levantamento tfoot td {
  background: var(--azul-claro);
  border-top: 2px solid var(--azul);
  border-bottom: 0;
  font-weight: 700;
  color: var(--navy);
}

.tabela-levantamento tfoot tr.perdas td {
  background: #f3f7fb;
  border-top: 1px solid var(--azul-borda);
  font-weight: 400;
  font-size: 11.5px;
  color: var(--tinta-fraca);
}

/* Obra com muitas bitolas: rola dentro da folha em vez de estourar a largura. */
.ficha .grupo:has(> .tabela-levantamento) { overflow-x: auto; }

/* ==========================================================================
   Painel - grafite, o mesmo da tela de entrada

   As outras telas sao de trabalho: ficha que se le de perto, tabela que se
   imprime. Papel branco e o certo para elas. Esta e de olhar de longe, para
   saber como a empresa esta - fundo escuro faz o numero saltar e a moldura
   sumir. A paleta vive so aqui dentro.
   ========================================================================== */

.painel-escuro {
  --grafite: #17191d;
  --grafite-2: #1e2126;
  --grafite-3: #262a30;
  --risco: #333840;
  --texto: #e8eaed;
  --texto-fraco: #949ba5;
  --aco: #c9d1d9;

  /* Sangra ate as bordas: o painel e a tela, nao um cartao dentro dela. */
  margin: -22px -26px -60px;
  min-height: calc(100% + 82px);
  padding: 26px 30px 40px;
  background: var(--grafite);
  color: var(--texto);
}

.p-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--risco);
}
.p-topo h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.2px; }

/* Sem logo cadastrada, o nome da empresa faz o papel dela. */
.marca-painel {
  font-family: var(--fonte-tecnica);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.1;
  color: var(--g-texto);
}

.p-botao {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--risco);
  border-radius: 7px;
  background: transparent;
  color: var(--texto-fraco);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.p-botao:hover { color: var(--texto); border-color: #495059; background: var(--grafite-3); }

/* ---------- placas de numero ---------- */

.p-placas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.p-placa {
  padding: 16px 18px;
  border: 1px solid var(--risco);
  border-radius: 9px;
  background: var(--grafite-2);
}
/* O numero que importa e o da carteira. Uma placa clara entre cinco escuras diz
   isso sem precisar de titulo maior nem de seta. */

.p-placa-num {
  display: block;
  font-size: 27px;
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -.5px;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.p-placa-rot {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .4px;
  color: var(--texto-fraco);
}

/* ---------- grade de cartoes ---------- */

.p-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 12px;
  align-items: start;
}

.p-cartao {
  padding: 18px 20px 20px;
  border: 1px solid var(--risco);
  border-radius: 9px;
  background: var(--grafite-2);
}
.p-cartao.larga { grid-column: 1 / -1; }
.p-cartao h2 {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.p-nota { margin: 14px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--g-fraco); }
.painel-vazio-bloco { margin: 0; font-size: 12.5px; color: var(--texto-fraco); }

/* ---------- barras ---------- */

.p-barras { display: flex; flex-direction: column; gap: 13px; }

.p-barra { display: block; }
.p-barra[data-cliente] { cursor: pointer; }
.p-barra[data-cliente]:hover .p-barra-nome { color: #fff; }

.p-barra-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
}
.p-barra-nome {
  font-size: 12.5px;
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p-barra-valor {
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-fraco);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.p-trilho {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: #2b3037;
  overflow: hidden;
}
.p-cheia { display: block; height: 100%; border-radius: 3px; }

/* ---------- barra repartida da producao ---------- */

.p-legenda { list-style: none; margin: 16px 0 0; padding: 0; }
.p-legenda li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 6px 0;
  border-bottom: 1px solid #262a30;
  font-size: 12.5px;
}
.p-legenda li:last-child { border-bottom: 0; }
.p-ponto { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.p-legenda-nome { flex: 1; color: var(--texto); }
.p-legenda-valor { color: var(--texto-fraco); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- tabela ---------- */

.p-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.p-tabela th {
  padding: 0 12px 9px;
  border-bottom: 1px solid var(--risco);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--texto-fraco);
  text-align: left;
}
.p-tabela td {
  padding: 9px 12px;
  border-bottom: 1px solid #23272d;
  color: var(--texto);
}
.p-tabela tbody tr { cursor: pointer; }
.p-tabela tbody tr:hover td { background: var(--grafite-3); }
.p-tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-tabela .nome { font-weight: 600; }
.p-tabela .destaque { color: var(--aco); font-weight: 600; }
.p-tabela .fraco { color: var(--texto-fraco); }

/* ---------- corte do elemento ---------- */

/* O concreto e contorno fino; o aco e o traco forte. Invertido, o olho leria a
   forma do concreto como se fosse a armacao. */
/* Mesma regra do traco: a armadura do corte e preta, o concreto e contorno fino
   cinza. Quem le o corte esta contando barra, nao admirando a paleta. */
.desenho svg .concreto { fill: #f4f7fa; stroke: #8b96a1; stroke-width: .9; }
.desenho svg .barra { fill: #14181d; stroke: none; }

.desenho.corte svg { overflow: visible; }

.faixa-corte {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 26px 4px;
}

.legenda-corte {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.9;
  color: var(--tinta);
}
.legenda-corte li { white-space: nowrap; }

.painel-peca.largo { width: min(720px, 96vw); }

.corte-lado-a-lado {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: start;
}

.corte-previa {
  padding: 14px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background: var(--fundo);
  text-align: center;
}
.corte-previa .legenda-corte { margin-top: 12px; text-align: left; }

.grupo-camadas {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}
.grupo-camadas h4 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.linha-camada {
  display: grid;
  grid-template-columns: 100px 70px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.rotulo-camada { font-size: 12.5px; color: var(--tinta-fraca); }
.linha-camada input, .linha-camada select { margin: 0; }

/* a armadura que o corte vai lançar, conferida antes de existir */
.tabela-corte-pecas {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  font-size: 12px;
  text-align: left;
}
.tabela-corte-pecas th {
  padding: 5px 6px;
  border-bottom: 1px solid var(--linha);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.tabela-corte-pecas td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--linha);
  color: var(--tinta);
  white-space: nowrap;
}
.tabela-corte-pecas .num { text-align: right; }
.tabela-corte-pecas tfoot td {
  border-top: 2px solid var(--acento);
  border-bottom: 0;
  font-weight: 700;
}

@media (max-width: 700px) {
  .corte-lado-a-lado { grid-template-columns: 1fr; }
  .faixa-corte { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   TEMA GRAFITE
   ==========================================================================

   Casca escura, ficha branca.

   A ficha nao acompanha o tema, e isso e deliberado: ela vai impressa para a
   bancada e em PDF para o cliente. Folha preta e toner gasto e papel ilegivel.
   O padrao aqui e o de editor de documento - a moldura escura, a folha branca
   flutuando dentro dela.

   Cinza, nao preto: a base e 1B1B1B/242424, nao #000. Preto puro numa tela
   grande cansa a vista e faz qualquer sombra sumir; o cinza deixa os degraus
   de elevacao aparecerem.

   Um acento so, ambar, usado com parcimonia: estado positivo e a acao
   principal. Cor espalhada vira enfeite e para de significar.
   ========================================================================== */

:root {
  --g-fundo:   #141414;   /* o mais fundo, atras de tudo */
  --g-base:    #1b1b1b;   /* superficie padrao: listas, folhas, barras */
  --g-alto:    #242424;   /* elevado: cartoes, campos, hover */
  --g-alto-2:  #2e2e2e;   /* mais elevado ainda: menus, paineis */
  --g-risco:   #343434;   /* divisoes e contornos */
  --g-risco-2: #414141;   /* contorno em foco/hover */

  --g-texto:   #e9e9e7;
  --g-medio:   #b7b7b7;
  --g-fraco:   #959595;

  /* O acento e a tipografia ficam no bloco do fim deste arquivo. */

  /* Os tokens antigos passam a apontar para o tema. O que usa variavel vira
     escuro sozinho; o que tem cor cravada e corrigido logo abaixo. */
  --navy: var(--g-alto);
  --azul: var(--acento);
  --azul-claro: var(--g-alto-2);
  --azul-borda: var(--g-risco-2);
  --tinta: var(--g-texto);
  --tinta-fraca: var(--g-fraco);
  --linha: var(--g-risco);
  --fundo: var(--g-fundo);
  --papel: var(--g-base);
}

body { background: var(--g-fundo); color: var(--g-texto); }

/* ---------- barra do topo e abas ---------- */


/* O quadradinho colorido de cada servico. Um tom por assunto: o olho aprende
   a posicao pela cor antes de ler a palavra. */
.icone {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 5px;
  flex: none;
}
.icone svg { width: 13px; height: 13px; stroke-width: 1.8; }

.icone.painel     { background: var(--acento-fundo); color: var(--acento); }
.icone.clientes   { background: #1c2f45; color: #8fbcea; }
.icone.montagem   { background: #14312e; color: #6fcfc4; }
.icone.producao   { background: #2c2242; color: #b79ae8; }
.icone.usuarios   { background: #3a2029; color: #e79ab0; }
.icone.manutencao { background: #262d36; color: #a3b1c2; }

.botao { border-color: var(--g-risco); background: var(--g-alto); color: var(--g-texto); }
.botao:hover { background: var(--g-alto-2); }
/*
   TINTA ESCURA sobre o azul do acento, e nao branca.

   Historia deste botao em tres passos. O acento era ambar; a letra era
   "#14251a", um verde-quase-preto que combinava com ele. O acento virou
   azul-aco e ninguem trocou a letra — ficou verde escuro sobre azul. A correcao
   seguinte pos BRANCO, o que resolveu a cor errada e criou outra: o azul do
   tema escuro e CLARO (#6ba4e0), e branco em cima dele da 2,62:1. O botao mais
   importante de cada tela era o menos legivel.

   Tinta escura sobre esse azul da 7,15:1. No tema claro o acento e um azul
   escuro (#1d6fc4) e ai o branco e que esta certo — cada tema pede o oposto,
   por isso sao duas regras e nao uma. */
.botao.primario, .botao-claro.destaque, .entrada-caixa .botao.primario {
  background: var(--acento);
  color: #0b1b2b;
  border-color: transparent;
}
.botao.primario:hover { background: var(--acento-claro); }
:root[data-tema="claro"] .botao.primario,
:root[data-tema="claro"] .botao-claro.destaque,
:root[data-tema="claro"] .entrada-caixa .botao.primario { color: #fff; }
.botao.fantasma { background: transparent; color: var(--g-medio); }
.botao.fantasma:hover { background: var(--g-alto); color: var(--g-texto); }

/* ---------- lateral ---------- */

.item-etapa { color: var(--g-medio); }
.item-etapa:hover { background: var(--g-alto); color: var(--g-texto); }
.item-etapa.ativo { background: var(--g-alto-2); border-left-color: var(--acento); color: var(--g-texto); }
.item-etapa .codigo { background: var(--g-alto-2); color: var(--g-medio); }
.item-etapa.ativo .codigo { background: var(--acento-fundo); color: var(--acento); }
.item-etapa .kg { color: var(--g-fraco); }
.item-etapa.ativo .kg { color: var(--g-texto); }
.cabecalho-obra { border-bottom-color: var(--g-risco); }
.cabecalho-obra h2 { color: var(--g-texto); }
.cabecalho-obra .peso-total { color: var(--acento); }

/* ---------- superficies ---------- */




/* ---------- campos ---------- */

.campo-busca,
.grade-campos input, .grade-campos select, .grade-campos textarea,
.painel-peca input, .painel-peca select, .painel-peca textarea,
.campo-inline input, .campo-inline select, .campo-inline textarea {
  background: var(--g-alto);
  border-color: var(--g-risco);
  color: var(--g-texto);
}
.campo-busca::placeholder, .grade-campos input::placeholder { color: #6b6b6b; }
.campo-busca:focus,
.grade-campos input:focus, .grade-campos select:focus, .grade-campos textarea:focus {
  border-color: var(--g-risco-2);
  box-shadow: 0 0 0 3px var(--acento)1f;
}
.grade-campos label, .campo-inline { color: var(--g-fraco); }

/* ---------- botoes claros ---------- */

.botao-claro, .botao-mini {
  background: var(--g-alto);
  border-color: var(--g-risco);
  color: var(--g-medio);
}
.botao-claro:hover, .botao-mini:hover {
  background: var(--g-alto-2);
  border-color: var(--g-risco-2);
  color: var(--g-texto);
}
.botao-claro.destaque { background: var(--acento); border-color: var(--acento); }
.botao-claro.destaque:hover { background: var(--acento-claro); border-color: var(--acento-claro); }

/* ---------- tabelas de lista (fora da ficha) ---------- */


/* ---------- quadro de producao ---------- */

.coluna-kanban { background: var(--g-base); border-color: var(--g-risco); }
.coluna-kanban .contagem { background: var(--g-alto-2); color: var(--g-medio); }
.pilha.sobre { background: var(--g-alto-2); outline: 2px dashed var(--acento); outline-offset: -4px; }
.cartao-kanban { background: var(--g-alto); border-color: var(--g-risco); color: var(--g-texto); }
.cartao-kanban:hover { border-color: var(--g-risco-2); }

/* ---------- paineis laterais ---------- */

.painel-peca header { border-bottom-color: var(--g-risco); }
.painel-peca h3 { color: var(--g-texto); }
.fundo-painel { background: #000000a8; }

.item-pasta { background: var(--g-alto); border-bottom-color: var(--g-risco); color: var(--g-texto); }
.item-pasta:hover { background: var(--g-alto-2); }
.lista-pastas { border-color: var(--g-risco); }
.caminho-atual { background: var(--g-alto); color: var(--g-texto); }

.dica, .nota { color: var(--g-fraco); }
.vazio-interno, .sem-resultado { color: var(--g-fraco); }

/* ==========================================================================
   A FOLHA - a ficha volta a ser papel
   ==========================================================================
   Redefinir os tokens aqui dentro basta: tudo o que a ficha usa herda daqui.
   ========================================================================== */

.ficha, .bloco-auditoria, .etiqueta {
  --navy: #103454;
  --azul: #195788;
  --azul-claro: #dcebf7;
  --azul-borda: #b9d6ee;
  --tinta: #1b2733;
  --tinta-fraca: #5b6b7b;
  --linha: #d8dfe6;
  --fundo: #eef2f6;
  --papel: #ffffff;

  background: #fff;
  color: #1b2733;
  border-color: #d8dfe6;
  box-shadow: 0 6px 30px #00000066;
}

.ficha .dica, .ficha .nota, .bloco-auditoria .dica { color: #5b6b7b; }
.ficha .botao-mini {
  background: #fff;
  border-color: #d8dfe6;
  color: #5b6b7b;
}
.ficha .botao-mini:hover { background: #f3f7fb; color: #103454; }
.ficha .tabela-lista td { color: #1b2733; }

/* ---------- painel do corte: a previa e papel, o resto e casca ---------- */

.corte-previa { background: #fff; border-color: var(--g-risco); }
.corte-previa .legenda-corte { color: #1b2733; }

/* a prévia da armadura fica na casca do painel, e segue os tokens do tema */
.tabela-corte-pecas td { color: var(--g-texto); }
.tabela-corte-pecas th { color: var(--g-fraco); }
.tabela-corte-pecas th,
.tabela-corte-pecas td { border-color: var(--borda); }

@media print {
  .ficha, .bloco-auditoria { box-shadow: none; }
}

/* ---------- entrada e painel passam a usar a mesma regua ----------
   Eles nasceram antes do tema, cada um com a sua paleta propria. Dois cinzas
   quase iguais lado a lado sao piores do que dois bem diferentes: parece
   defeito de tela. Aqui os dois apontam para os mesmos tokens. */

.entrada, .painel-escuro {
  --grafite:   var(--g-fundo);
  --grafite-2: var(--g-base);
  --grafite-3: var(--g-alto);
  --risco:     var(--g-risco);
  --texto:     var(--g-texto);
  --texto-fraco: var(--g-fraco);
  --aco:       var(--g-texto);
}

/* A acao principal da entrada e do painel usa o mesmo ambar do resto. */
.entrada-caixa .botao.primario { background: var(--acento); }
.entrada-caixa .botao.primario:hover { background: var(--acento-claro); }
.entrada-estado .ponto { background: var(--acento); box-shadow: 0 0 0 3px var(--acento)29; }

.p-tabela .destaque { color: var(--acento); }

/* ==========================================================================
   ESTRUTURA — trilho de serviços, topo fino, conteúdo

   Substitui a barra de abas horizontal. Aba cresce para o lado e uma hora nao
   cabe; a coluna aguenta o servico que vier. E quem usa o programa o dia
   inteiro acha pela POSICAO, nao pela palavra - a lista vertical fixa a
   posicao de cada servico para sempre.

   O trilho abre ao passar o mouse: fechado sao so os icones, aberto mostra os
   nomes. Fechado por padrao porque o espaco pertence ao trabalho, nao ao menu.
   ========================================================================== */

.app { display: flex; height: 100%; }
.avulso[hidden] { display: none !important; }

/* ---------- trilho ---------- */

.trilho {
  border-color: var(--borda);
  width: 60px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  background: var(--g-base);
  border-right: 1px solid var(--g-risco);
  overflow: hidden;
  transition: width .16s ease;
  z-index: 20;
}
.trilho:hover { width: 208px; box-shadow: 8px 0 28px #00000055; }

.trilho-marca {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  margin-bottom: 10px;
  border-radius: 10px;
  background: var(--acento-fundo);
  color: var(--acento);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .5px;
}

.trilho-itens { display: flex; flex-direction: column; gap: 3px; }

.servico {
  transition: background var(--rapido), color var(--rapido);
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--g-fraco);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.servico:hover { background: var(--g-alto); color: var(--g-texto); }
.servico.ativo { background: var(--g-alto-2); color: var(--g-texto); font-weight: 600; }

.servico .icone { width: 22px; height: 22px; border-radius: 6px; }
.servico .icone svg { width: 14px; height: 14px; }

/* Fechado, o nome existe mas nao ocupa: some sem empurrar o icone de lugar. */
.servico-nome { opacity: 0; transition: opacity .12s; }
.trilho:hover .servico-nome { opacity: 1; }

/* ---------- area: topo + corpo ---------- */

.area { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topo {
  height: 52px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  border-bottom: 1px solid var(--g-risco);
  background: var(--g-fundo);
}

.migalha {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 13px;
  color: var(--g-fraco);
  overflow: hidden;
  white-space: nowrap;
}
.migalha .agora { color: var(--g-texto); font-weight: 600; }
.migalha .seta { color: #5a5a5a; }

.identidade { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }

.pilula {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 12px 0 4px;
  border: 1px solid var(--g-risco);
  border-radius: 17px;
  background: var(--g-base);
}
.pilula .inicial {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--acento-fundo);
  color: var(--acento);
  font-size: 12px;
  font-weight: 700;
}
.pilula-texto b { display: block; font-size: 12.5px; font-weight: 600; color: var(--g-texto); line-height: 1.2; }
.pilula-texto small { display: block; font-size: 10.5px; color: var(--g-fraco); line-height: 1.2; }

.botao-icone {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--g-risco);
  border-radius: 9px;
  background: var(--g-base);
  cursor: pointer;
}
.botao-icone:hover { background: var(--g-alto); }
.botao-icone .icone { width: 20px; height: 20px; }

.corpo { flex: 1; display: flex; min-height: 0; }
.conteudo { flex: 1; overflow-y: auto; padding: 22px 26px 60px; min-width: 0; }


/* ---------- rotulos de secao, no estilo da referencia ---------- */

.barra-ferramentas {
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--g-risco);
}
.barra-ferramentas .titulo-secao {
  font-family: "Consolas", "SF Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .6px;
  color: var(--g-fraco);
  text-transform: none;
}
.barra-ferramentas .titulo-secao::before { content: "// "; color: #5a5a5a; }

/* ---------- superficies mais macias ---------- */


.botao-claro, .botao-mini, .botao { border-radius: 9px; }
.grade-campos input, .grade-campos select, .grade-campos textarea,


/* Janela estreita: o trilho vira uma faixa e a lateral sai da frente. */
@media (max-width: 900px) {
  .trilho { width: 52px; padding: 10px 6px; }
  .trilho:hover { width: 190px; }
  .lateral { width: 210px; }
  .conteudo { padding: 18px 16px 50px; }
}

@media print {
  .trilho, .topo { display: none !important; }
  .app { display: block; }
  .area, .corpo { display: block; }
}

/* ---------- a vitrine da entrada ---------- */

/* A imagem saiu; a trama fina de linhas do bloco original volta a ser o unico
   fundo. Sem ela a vitrine seria um retangulo chapado. */
.entrada-vitrine { border-right: 1px solid var(--borda); }
.entrada-marca, .entrada-chamada, .entrada-estado { position: relative; z-index: 1; }
.entrada-estado { border-top-color: var(--borda); }
/* ==========================================================================
   Mapa do fluxo — nos ligados, no espirito do n8n

   As placas do painel dizem QUANTO. Este mapa diz ONDE, e principalmente onde
   travou: no gordo no meio do caminho e servico parado, e isso se ve antes de
   ler numero nenhum.
   ========================================================================== */

.p-topo-acoes { display: flex; align-items: center; gap: 10px; }

.alternador {
  display: flex;
  padding: 3px;
  border: 1px solid var(--g-risco);
  border-radius: 10px;
  background: var(--g-base);
}
.alternador button {
  padding: 6px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--g-fraco);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.alternador button.ativo { background: var(--g-alto-2); color: var(--g-texto); font-weight: 600; }

/* ==========================================================================
   Acento e tipografia
   ==========================================================================

   AZUL-ACO no lugar do ambar. O ambar era quente demais e ficava perto do
   amarelo de alerta - cor de aviso usada como enfeite tira a forca do aviso
   de verdade. O azul frio senta melhor sobre grafite, e deixa o vermelho de
   erro e o verde de ok voltarem a significar so o que devem.

   TIPOGRAFIA em duas familias:
     Bahnschrift  numeros, titulos e rotulos - e a DIN do Windows, a letra
                  de placa e de desenho tecnico. Combina com o assunto.
     Segoe UI     texto corrido, que precisa de largura para ser lido.

   Nenhuma das duas e baixada: as duas ja vem no Windows. Fonte embutida
   engordaria o executavel que cada maquina baixa a cada atualizacao.
   ========================================================================== */

:root {
  --acento:       #6ba4e0;
  --acento-claro: #8fbcea;
  --acento-veu:   #6ba4e01f;
  --acento-fundo: #17293c;

  --fonte-texto: "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-tecnica: "Bahnschrift", "DIN Alternate", "Segoe UI Semibold", "Segoe UI", sans-serif;
}

body { font-family: var(--fonte-texto); }

/* A letra tecnica onde o assunto e numero ou rotulo, nunca em texto corrido. */
.p-placa-num, .p-topo h1, .placa-numero,
.entrada-chamada h1, .entrada-sigla, .trilho-marca,
.rosca-num,
.cabecalho-obra .peso-total, .item-etapa .codigo,
.ficha-topo h1, .peso-total, .p-tabela .num, .tabela-levantamento .num {
  font-family: var(--fonte-tecnica);
  letter-spacing: .2px;
}

.p-cartao h2, .folha h2, .barra-ferramentas .titulo-secao, .p-topo p {
  font-family: var(--fonte-tecnica);
}

/* Bahnschrift e mais estreita: em numero grande ela pede um pouco mais de ar. */
.p-placa-num { font-size: 29px; letter-spacing: .4px; }

/* ---------- graficos ---------- */

.grafico { width: 100%; height: 190px; display: block; }

.grafico .grade { stroke: #2b2b2b; stroke-width: 1; }
.grafico .eixo {
  font-family: var(--fonte-tecnica);
  font-size: 10px;
  fill: var(--g-fraco);
}
.grafico .linha {
  fill: none;
  stroke: var(--acento);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.grafico .ponto { fill: var(--g-base); stroke: var(--acento); stroke-width: 2; }
.grafico .ponto:hover { fill: var(--acento); r: 4.5; }

.rosca-linha { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rosca { width: 160px; height: 160px; flex: none; }
.rosca .fatia { stroke: var(--g-base); stroke-width: 1.5; transition: opacity .12s; }
.rosca .fatia:hover { opacity: .82; }
.rosca-num {
  font-family: var(--fonte-tecnica);
  font-size: 19px;
  font-weight: 700;
  fill: var(--g-texto);
}
.rosca-rot { font-size: 9.5px; fill: var(--g-fraco); }
.rosca-linha .p-legenda { flex: 1; min-width: 180px; margin: 0; }

/* Na ficha impressa a letra tecnica tambem serve, mas em preto. */
.ficha .num, .ficha .peso-total { font-family: var(--fonte-tecnica); }

/* ==========================================================================
   ACABAMENTO
   ==========================================================================

   O que separa um programa que parece caro de um que parece feito em casa
   quase nunca e a cor. E isto:

   1. ESCALA. Espacamento, raio e sombra saem de uma regua so. Padding de
      13px num lugar e 15px no outro ninguem consegue apontar, mas todo mundo
      sente - e o nome que se da para o que se sente e "amador".

   2. CONTORNO QUE NAO CORTA. Linha cinza solida em tudo e o jeito mais rapido
      de deixar uma tela dura. Em fundo escuro, borda de verdade e um branco
      com 6% de opacidade: le como luz batendo na quina, nao como risco.

   3. LUZ EM CIMA. Uma linha clarissima no topo de cada superficie eleva o
      cartao do fundo. E o truque mais barato e mais eficaz do tema escuro.

   4. SOMBRA EM DUAS CAMADAS. Uma curta e fechada para assentar o objeto, uma
      longa e aberta para dar altura. Sombra unica e borrada parece nevoa.

   5. MOVIMENTO. Nada muda de estado de supetao. 120ms em tudo o que responde
      ao mouse - imperceptivel, e a diferenca entre "responde" e "pisca".
   ========================================================================== */

:root {
  /* espacamento */
  --e1: 4px;  --e2: 8px;  --e3: 12px;
  --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;

  /* raio */
  --r1: 8px; --r2: 12px; --r3: 16px; --r-pilula: 999px;

  /* contorno: luz na quina, nao risco */
  --borda:       #ffffff0f;
  --borda-forte: #ffffff1f;
  --luz-topo:    #ffffff0a;

  /* elevacao em duas camadas */
  --sombra1: 0 1px 2px #00000059, 0 2px 8px #0000003d;
  --sombra2: 0 2px 4px #00000066, 0 12px 32px #00000052;
  --sombra3: 0 4px 8px #00000073, 0 24px 64px #0000005c;

  --curva: cubic-bezier(.4, 0, .2, 1);
  --rapido: 120ms var(--curva);
}

/* ---------- superficies ---------- */

.folha, .p-cartao, .cartao-obra, .cartao-cliente,
.coluna-kanban, .cartao-kanban, .no, .mapa, .alternador,
.pilula, .botao-icone, .lista-pastas, .p-placa {
  border-color: var(--borda);
  box-shadow: inset 0 1px 0 var(--luz-topo), var(--sombra1);
}

.folha, .p-cartao {
  padding: var(--e5);
  border-radius: var(--r2);
  margin-bottom: var(--e3);
  background:
    linear-gradient(180deg, #ffffff05, transparent 120px),
    var(--g-base);
}



/* ---------- divisoes ---------- */

..topo, .trilho, .lateral,
.barra-ferramentas, .p-topo, .painel-peca header,
.cabecalho-obra, .separador, .tabela-lista th, .tabela-lista td,
.p-tabela th, .p-tabela td, .p-legenda li, .item-pasta {
  border-color: var(--borda);
}

/* ---------- botoes ---------- */

.botao, .botao-claro, .botao-mini, .botao-icone, .p-botao, .alternador button {
  transition: background var(--rapido), border-color var(--rapido),
              color var(--rapido), transform var(--rapido);
}
.botao:active, .botao-claro:active, .botao-mini:active { transform: translateY(1px); }

.botao-claro, .botao-mini, .p-botao {
  border-color: var(--borda);
  box-shadow: inset 0 1px 0 var(--luz-topo);
}
.botao-claro:hover, .botao-mini:hover, .p-botao:hover { border-color: var(--borda-forte); }

.botao.primario, .botao-claro.destaque {
  box-shadow: 0 1px 2px #00000066, 0 4px 12px #6ba4e029;
}
.botao.primario:hover, .botao-claro.destaque:hover {
  box-shadow: 0 1px 2px #00000066, 0 6px 20px #6ba4e03d;
}

/* ---------- foco: um so em todo o programa ---------- */

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--r1);
}
input:focus, select:focus, textarea:focus { outline: none; }

/* ---------- campos ---------- */

.grade-campos input, .grade-campos select, .grade-campos textarea,
.campo-busca, .painel-peca input, .painel-peca select {
  border-color: var(--borda);
  box-shadow: inset 0 1px 2px #00000038;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.grade-campos input:focus, .grade-campos select:focus,
.grade-campos textarea:focus, .campo-busca:focus {
  border-color: var(--acento);
  box-shadow: inset 0 1px 2px #00000038, 0 0 0 3px var(--acento-veu);
}

/* ---------- rotulos: menos peso, mais espaco ---------- */

.grade-campos label, .campo-inline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--g-fraco);
}

.folha h2, .p-cartao h2 {
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--g-fraco);
  margin-bottom: var(--e4);
}

/* ---------- texto respira ---------- */

body { line-height: 1.55; -webkit-font-smoothing: antialiased; }
.dica, .nota, .p-nota { line-height: 1.7; }

/* ---------- trilho ---------- */


/* A marca deixa de ser um quadrado com duas letras. */
.trilho-marca {
  background: linear-gradient(145deg, var(--acento), #4a7fb5);
  color: #0f1a24;
  box-shadow: inset 0 1px 0 #ffffff40, 0 2px 10px #6ba4e033;
}

/* ---------- tabelas ---------- */

.tabela-lista th, .p-tabela th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding-bottom: var(--e3);
}
.tabela-lista td, .p-tabela td { padding: var(--e3) var(--e3); }
.tabela-lista tr, .p-tabela tbody tr { transition: background var(--rapido); }

/* ---------- vazio: uma tela, nao uma frase solta ---------- */

.painel-vazio p { max-width: 380px; margin: 0 auto var(--e5); font-size: 13px; }

.vazio-interno, .painel-vazio-bloco {
  padding: var(--e5) 0;
  text-align: center;
  font-size: 12.5px;
}

/* ---------- placas do painel ---------- */

.p-placa {
  padding: var(--e4) var(--e5);
  border-radius: var(--r2);
  transition: border-color var(--rapido);
}
.p-placa:hover { border-color: var(--borda-forte); }
.p-placa.forte {
  background: linear-gradient(145deg, #1d3550, var(--acento-fundo));
  border-color: #2f4f70;
}
.p-placa.forte .p-placa-num { color: var(--acento-claro); }
.p-placa.forte .p-placa-rot { color: #8aa8c4; }

/* A carteira nao e so um numero no painel: e a porta para a tela cheia, com o
   detalhe por bitola, por usuario e a impressao. Como ela agora e um <button>
   no meio de placas que sao <div>, precisa de reset — senao entra com a moldura
   e a letra de botao de formulario e destoa da fileira. */
/* .p-placas.uma-so e .p-placa-atalho sairam com a carteira, que virou tira. */
.p-placa-atalho:active { transform: translateY(1px); }
.p-placa-atalho:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.p-placa-pe {
  display: block;
  margin-top: var(--e2);
  font-size: 11px;
  color: #8aa8c4;
}

@media (prefers-reduced-motion: reduce) {
  .p-placa-atalho { transition: none; }
  .p-placa-atalho:active { transform: none; }
}

.p-placas { gap: var(--e3); margin-bottom: var(--e5); }
.p-grade { gap: var(--e3); }

/* ---------- rolagem discreta ---------- */

* { scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #454545; background-clip: content-box; }

/* ---------- a ficha tambem ganha altura ---------- */

.ficha { border-radius: var(--r2); box-shadow: var(--sombra3); }

/* A marca virou desenho: a caixa passa a segurar um SVG, nao duas letras. */
.trilho-marca svg { width: 22px; height: 22px; display: block; }

/* ==========================================================================
   Esqueleto de carregamento e tela Sobre
   ========================================================================== */

.esqueleto { pointer-events: none; }

.osso {
  border-radius: var(--r2);
  background: linear-gradient(100deg, #202020 30%, #2b2b2b 50%, #202020 70%);
  background-size: 300% 100%;
  animation: brilha 1.3s ease-in-out infinite;
}

/* O brilho anda da esquerda para a direita, no ritmo de uma respiracao. Mais
   rapido que isso vira ansiedade na tela; mais lento parece travado. */
@keyframes brilha {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.osso.barra { height: 20px; width: 220px; margin-bottom: var(--e5); border-radius: var(--r1); }
.osso.placa { height: 86px; }
.osso.tira { height: 72px; }
.osso.cartao { height: 128px; }
.osso.coluna { height: 340px; }

.esqueleto-colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e3);
}

/* Quem prefere o computador quieto nao ganha animacao nenhuma. */
@media (prefers-reduced-motion: reduce) {
  .osso { animation: none; background: #242424; }
  * { transition-duration: 1ms !important; }
}

/* ---------- Sobre ---------- */

.sobre-marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4) 0 var(--e5);
}
.sobre-marca svg {
  width: 44px; height: 44px;
  flex: none;
  padding: 9px;
  border-radius: var(--r2);
  background: linear-gradient(145deg, var(--acento), #4a7fb5);
  color: #0f1a24;
  box-shadow: inset 0 1px 0 #ffffff40, 0 2px 12px #6ba4e033;
}
.sobre-marca b { display: block; font-size: 16px; color: var(--g-texto); }
.sobre-marca small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--g-fraco); }

.sobre-rodape {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
  font-size: 12px;
  color: var(--g-fraco);
}
.sobre-rodape b { display: block; color: var(--g-medio); margin-bottom: 3px; }

/* ---------- endereco atual, dentro da engrenagem ---------- */

.servidor-atual {
  margin-bottom: var(--e4);
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--r1);
  background: #16181c;
}
.servidor-atual .rotulo {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--g-fraco);
}
.servidor-atual b {
  display: block;
  margin-top: 3px;
  font-family: var(--fonte-tecnica);
  font-size: 13px;
  color: var(--g-texto);
  word-break: break-all;
}

/* ---------- bloco compacto de anexos ---------- */

/* Na maioria dos clientes isto guarda zero ou um arquivo. Um bloco alto para
   isso empurra os levantamentos - o que interessa - para baixo da dobra. */
.folha.compacta { padding: var(--e4) var(--e5); }
.folha.compacta .cabecalho-bloco { margin-bottom: 0; }
.folha.compacta .lista-anexos { margin-top: var(--e3); }

.cabecalho-bloco .direita { display: flex; align-items: center; gap: var(--e2); }

.conta-anexos {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: var(--r-pilula);
  background: var(--g-alto-2);
  font-size: 11px;
  font-weight: 700;
  color: var(--g-medio);
  text-align: center;
}

.lista-anexos { list-style: none; margin: 0; padding: 0; }
.lista-anexos li {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--borda);
  font-size: 12.5px;
}
.lista-anexos li:last-child { border-bottom: 0; }
.lista-anexos .meta { flex: 1; font-size: 11.5px; color: var(--g-fraco); }

.sem-anexo { margin: var(--e3) 0 0; font-size: 12px; color: var(--g-fraco); }

/* ==========================================================================
   TEMA CLARO
   ==========================================================================

   O tema vive todo em tokens, entao trocar de pele e redefinir os tokens - nao
   reescrever componente nenhum. E o motivo de a consolidacao ter valido a pena:
   antes disto, tema claro seria caçar 2.900 linhas.

   Escolha do usuario, guardada no servidor: quem trabalha na bancada, sob a luz
   do galpao, costuma querer claro; quem fica no escritorio o dia inteiro
   costuma querer escuro. Nao existe resposta certa, existe preferencia - e ela
   segue a pessoa para qualquer maquina em que ela entrar.
   ========================================================================== */

:root[data-tema="claro"] {
  --g-fundo:   #eef1f4;   /* o mais fundo */
  --g-base:    #ffffff;   /* superficie padrao */
  --g-alto:    #f4f6f9;   /* elevado: campos, hover */
  --g-alto-2:  #e7ecf2;   /* menus e itens ativos */
  --g-risco:   #d8dfe6;
  --g-risco-2: #c2cdd8;

  --g-texto:   #1b2733;
  --g-medio:   #4a5866;
  /* Era #6b7a89: 4,4:1 sobre branco, um fio abaixo do minimo legivel. Passa
     despercebido num rotulo solto e nao passa numa tela cheia deles. E o fundo
     das telas nao e branco puro, entao a conta tem que fechar contra ele. */
  --g-fraco:   #5f6b78;

  --acento:       #1d6fc4;
  --acento-claro: #16559a;
  --acento-veu:   #1d6fc41f;
  --acento-fundo: #dceaf8;

  /* No claro a borda nao pode ser branco transparente - viraria invisivel.
     Aqui ela e cinza de verdade, e a "luz no topo" some. */
  --borda:       #dde3ea;
  --borda-forte: #c2cdd8;
  --luz-topo:    transparent;

  --sombra1: 0 1px 2px #10345412, 0 2px 8px #1034540f;
  --sombra2: 0 2px 4px #10345417, 0 12px 32px #10345414;
  --sombra3: 0 4px 8px #1034541a, 0 24px 64px #10345417;
}

/* Corrige o que estava cravado em cor escura. */
:root[data-tema="claro"] .p-placa.forte {
  background: linear-gradient(145deg, #1d6fc4, #16559a);
  border-color: #16559a;
}
:root[data-tema="claro"] .p-placa.forte .p-placa-num { color: #fff; }
:root[data-tema="claro"] .p-placa.forte .p-placa-rot { color: #cfe2f5; }
:root[data-tema="claro"] .p-placa-pe { color: #cfe2f5; }

:root[data-tema="claro"] .botao.primario,
:root[data-tema="claro"] .botao-claro.destaque { color: #fff; }
:root[data-tema="claro"] .botao.primario:hover,
:root[data-tema="claro"] .botao-claro.destaque:hover { background: #16559a; }

:root[data-tema="claro"] .trilho-marca { color: #fff; }
:root[data-tema="claro"] .pilula .inicial { background: var(--acento-fundo); color: var(--acento); }
:root[data-tema="claro"] .osso { background: linear-gradient(100deg, #e6eaef 30%, #f2f5f8 50%, #e6eaef 70%); background-size: 300% 100%; }
:root[data-tema="claro"] .fundo-painel { background: #10345466; }
:root[data-tema="claro"] .servidor-atual { background: var(--g-alto); }
:root[data-tema="claro"] .mapa {
  background:
    radial-gradient(circle at 1px 1px, #cfd8e2 1px, transparent 0) 0 0 / 22px 22px,
    var(--g-fundo);
}
:root[data-tema="claro"] .liga { stroke: #c2cdd8; }
:root[data-tema="claro"] .liga.acesa { stroke: #7fb0e0; }
:root[data-tema="claro"] .p-trilho, :root[data-tema="claro"] .p-fatias { background: #e3e9ef; }
:root[data-tema="claro"] .grafico .grade { stroke: #dde3ea; }
:root[data-tema="claro"] .entrada-vitrine {
  background: linear-gradient(160deg, #16283c 0%, #0f1c2b 100%);
}
:root[data-tema="claro"] .entrada-vitrine .entrada-chamada h1,
:root[data-tema="claro"] .entrada-vitrine .entrada-produto { color: #e9eef4; }
:root[data-tema="claro"] .entrada-vitrine .entrada-chamada p,
:root[data-tema="claro"] .entrada-vitrine .entrada-estado { color: #93a6ba; }

/* Os tons dos icones ficam claros demais em fundo branco. */
:root[data-tema="claro"] .icone.painel     { background: #dceaf8; color: #1d6fc4; }
:root[data-tema="claro"] .icone.clientes   { background: #dbe8f7; color: #2d6ba8; }
:root[data-tema="claro"] .icone.montagem   { background: #d6f0ec; color: #1d7d70; }
:root[data-tema="claro"] .icone.producao   { background: #e6ddf7; color: #6a48a8; }
:root[data-tema="claro"] .icone.usuarios   { background: #f7dde6; color: #a8496b; }
:root[data-tema="claro"] .icone.manutencao { background: #e2e7ee; color: #4a5866; }

/* ==========================================================================
   Tabela de quantitativo fora da ficha
   ==========================================================================
   Ela nasceu para a ficha branca - cabecalho navy, linha par cinza-claro,
   rodape azul-claro. Desenhada sobre a casca escura ficava texto claro sobre
   fundo claro, ilegivel. Fora da ficha ela passa a usar os tokens do tema.
   ========================================================================== */

.conteudo > .folha .tabela-levantamento thead th,
.conteudo .folha .tabela-levantamento thead th {
  background: var(--g-alto-2);
  color: var(--g-texto);
  border-bottom: 1px solid var(--borda);
}

.conteudo .folha .tabela-levantamento th,
.conteudo .folha .tabela-levantamento td {
  border-bottom: 1px solid var(--borda);
  color: var(--g-medio);
}

.conteudo .folha .tabela-levantamento tbody tr:nth-child(even) { background: transparent; }
.conteudo .folha .tabela-levantamento tbody tr:hover td { background: var(--g-alto); }

.conteudo .folha .tabela-levantamento .codigo-etapa,
.conteudo .folha .tabela-levantamento .forte { color: var(--g-texto); }
.conteudo .folha .tabela-levantamento .vazio { color: var(--g-fraco); opacity: .5; }

.conteudo .folha .tabela-levantamento tfoot td {
  background: var(--g-alto);
  border-top: 2px solid var(--acento);
  color: var(--g-texto);
}
.conteudo .folha .tabela-levantamento tfoot tr.perdas td {
  background: transparent;
  border-top: 1px solid var(--borda);
  color: var(--g-fraco);
}

/* ---------- o botao de tema ---------- */

.tema-troca {
  display: flex;
  padding: 3px;
  border: 1px solid var(--borda);
  border-radius: var(--r-pilula);
  background: var(--g-base);
}
.tema-troca button {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--g-fraco);
  cursor: pointer;
  transition: background var(--rapido), color var(--rapido);
}
.tema-troca button:hover { color: var(--g-texto); }
.tema-troca button.ativo { background: var(--g-alto-2); color: var(--acento); }
.tema-troca svg { width: 15px; height: 15px; }

/* ---------- barras verticais ---------- */

.grafico-barras { height: 240px; }

.grafico .coluna-barra .trilho-barra { fill: transparent; }
.grafico .coluna-barra:hover .trilho-barra { fill: #ffffff08; }
:root[data-tema="claro"] .grafico .coluna-barra:hover .trilho-barra { fill: #1034540a; }

.grafico .barra-v {
  fill: var(--acento);
  transition: fill var(--rapido);
}
.grafico .coluna-barra:hover .barra-v { fill: var(--acento-claro); }

/* Dia sem movimento vira um traco rente a base: o rotulo continua na regua e a
   lacuna fica visivel, em vez de a barra sumir e o dia parecer que nao existiu. */
.grafico .barra-v.zerada { fill: var(--g-risco); }

.grafico .valor-barra {
  font-family: var(--fonte-tecnica);
  font-size: 10px;
  font-weight: 600;
  fill: var(--g-medio);
}
.grafico .eixo .fraca, .grafico tspan.fraca { fill: var(--g-fraco); }

.alternador.miudo button { padding: 4px 11px; font-size: 12px; }
.cabecalho-bloco .alternador { margin-left: auto; }

/* ---------- duas series no mesmo grafico ---------- */

.legenda-grafico {
  display: flex;
  gap: var(--e4);
  margin-bottom: var(--e2);
  font-size: 11.5px;
  color: var(--g-fraco);
}
.legenda-grafico span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-grafico .marca { width: 10px; height: 10px; border-radius: 3px; }
.legenda-grafico .marca.produzido { background: var(--acento); }
.legenda-grafico .marca.entregue { background: #6fcfc4; }

.grafico .barra-v.produzido { fill: var(--acento); }
.grafico .barra-v.entregue { fill: #6fcfc4; }
.grafico .barra-v.zerada { fill: var(--g-risco); }
.grafico .coluna-barra:hover .barra-v.produzido { fill: var(--acento-claro); }
.grafico .coluna-barra:hover .barra-v.entregue { fill: #8fe0d6; }

/* ---------- coluna de entregues no quadro ---------- */

/* Ela e do quadro, mas nao e uma etapa: o tracejado diz "isto e o fim da linha",
   e o verde separa "saiu" de "esta em andamento" sem precisar de legenda. */
.coluna-kanban.entregues {
  border-style: dashed;
  border-color: var(--borda-forte);
  background: transparent;
}
.coluna-kanban.entregues header h3 { color: var(--ok); }
.coluna-kanban.entregues .pilha { min-height: 120px; }

.dica-coluna {
  margin: 0;
  padding: var(--e5) var(--e3);
  text-align: center;
  font-size: 11.5px;
  color: var(--g-fraco);
}

.cartao-kanban.entregue { opacity: .62; }
.cartao-kanban.entregue:hover { opacity: 1; }

/* ==========================================================================
   ESTRUTURA — lateral fixa, topo fino, conteudo com titulo
   ==========================================================================

   A lateral fica sempre aberta, com os nomes a vista. A versao anterior era uma
   faixa de icones que abria ao passar o mouse: economizava 150px e cobrava em
   hesitacao. Quem nao usa o programa todo dia nao sabe o que cada icone e, e
   passar o mouse para descobrir e um passo a mais em cada troca de tela.

   Este bloco vem depois de tudo e vence o anterior. As regras do trilho antigo
   continuam no arquivo por enquanto - saem na proxima limpeza.
   ========================================================================== */

.lateral-menu {
  width: 232px;
  flex: none;
  display: flex;
  flex-direction: column;
  padding: var(--e4) var(--e3) var(--e3);
  background: var(--g-base);
  border-right: 1px solid var(--borda);
  overflow: hidden;
}

/* ---------- marca ---------- */

.marca-bloco {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--e2) var(--e4);
}

.marca-selo {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r1);
  background: linear-gradient(145deg, var(--acento), #16559a);
  color: #fff;
  box-shadow: inset 0 1px 0 #ffffff40;
}
.marca-selo svg { width: 19px; height: 19px; }

.marca-texto b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--g-texto);
  line-height: 1.2;
}
.marca-texto { min-width: 0; }
.marca-texto small {
  display: block;
  font-size: 9.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--g-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- acao principal ---------- */

.acao-principal:not(:empty) { padding: 0 var(--e2) var(--e4); }
.acao-principal .botao.primario { width: 100%; height: 38px; }

/* ---------- os servicos ---------- */

.menu-itens { display: flex; flex-direction: column; gap: 2px; }

.servico {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  height: 38px;
  padding: 0 var(--e2);
  border: 0;
  border-radius: var(--r1);
  background: transparent;
  color: var(--g-medio);
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--rapido), color var(--rapido);
}
.servico:hover { background: var(--g-alto); color: var(--g-texto); }
.servico:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

.servico.ativo {
  background: var(--acento-fundo);
  color: var(--acento);
  font-weight: 600;
}

/* A marca da esquerda diz onde voce esta mesmo de canto de olho.
   Presa DENTRO da linha: estava em left:-12px, contando com o padding da
   lateral valer exatamente 12px — mudar o espacamento apagava a marca sem
   ninguem entender por que. */
.servico.ativo::before {
  content: "";
  position: absolute;
  left: 0; top: 7px; bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--acento);
}

/* Na lateral aberta o nome carrega o sentido; o quadradinho colorido viraria
   confete. O icone fica no tom do proprio item. */
.servico .icone {
  width: 20px; height: 20px;
  background: transparent !important;
  color: inherit !important;
  border-radius: 0;
}
.servico .icone svg { width: 18px; height: 18px; stroke-width: 1.7; }
.servico-nome { opacity: 1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- titulo de grupo ---------- */

.menu-grupo {
  margin: var(--e4) 0 var(--e1);
  padding: 0 var(--e2);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--g-fraco);
}
.menu-grupo:first-child { margin-top: 0; }

/* ---------- contagem e tecla ---------- */

/* Quantas fichas estao no quadro, sem precisar abrir o quadro. */
.servico-conta {
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--g-alto-2);
  color: var(--g-medio);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.servico-conta.atrasado { background: #4a1f24; color: #ff9d9d; }
:root[data-tema="claro"] .servico-conta.atrasado { background: #fdeceb; color: #b3261e; }
.servico.ativo .servico-conta { background: #ffffff2e; color: inherit; }

/* A coluna de numeros do atalho saiu da lateral, a pedido: era enfeite ao lado
   de sete itens que ja se distinguem pelo nome e pela cor do icone. O Alt+numero
   continua funcionando, e o title de cada item diz qual e a tecla — atalho que
   nao atrapalha quem nao usa. */

/* Um tom por assunto, no icone e so nele.
   O quadradinho colorido de fundo virava confete numa lateral aberta — mas o
   traco tingido separa os servicos sem gritar, e o olho aprende a cor antes de
   ler a palavra. No item ativo tudo volta para o acento: dois azuis diferentes
   na mesma linha nao dizem nada. */
.servico .icone { color: var(--tom-servico, inherit) !important; }
.servico[data-ir="painel"]     { --tom-servico: #8fbcea; }
.servico[data-ir="clientes"]   { --tom-servico: #6fcfc4; }
.servico[data-ir="montagem"]   { --tom-servico: #b79ae8; }
.servico[data-ir="kanban"]     { --tom-servico: #e7c07a; }
.servico[data-ir="entregas"]   { --tom-servico: #e79ab0; }
.servico[data-ir="usuarios"]   { --tom-servico: #9fb6cd; }
.servico[data-ir="manutencao"] { --tom-servico: #a3b1c2; }
.servico.ativo .icone { color: inherit !important; }

/* No claro os mesmos tons escurecem: pastel sobre branco some. */
:root[data-tema="claro"] .servico[data-ir="painel"]     { --tom-servico: #2f6ea8; }
:root[data-tema="claro"] .servico[data-ir="clientes"]   { --tom-servico: #1c7d72; }
:root[data-tema="claro"] .servico[data-ir="montagem"]   { --tom-servico: #6b4bab; }
:root[data-tema="claro"] .servico[data-ir="kanban"]     { --tom-servico: #96701c; }
:root[data-tema="claro"] .servico[data-ir="entregas"]   { --tom-servico: #a8446a; }
:root[data-tema="claro"] .servico[data-ir="usuarios"]   { --tom-servico: #4a6580; }
:root[data-tema="claro"] .servico[data-ir="manutencao"] { --tom-servico: #55636f; }

/* ---------- rodape da lateral ---------- */

.menu-rodape {
  margin-top: auto;
  padding-top: var(--e3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.identidade {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--e3);
  padding: var(--e2);
  border-top: 1px solid var(--borda);
}
.identidade .inicial {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--acento-fundo);
  color: var(--acento);
  font-size: 12px;
  font-weight: 700;
}
.quem-texto { flex: 1; min-width: 0; }
.quem-texto b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--g-texto);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quem-texto small { display: block; font-size: 10.5px; color: var(--g-fraco); }

.botao-icone.sair { width: 30px; height: 30px; border: 0; background: transparent; color: var(--g-fraco); }
.botao-icone.sair:hover { color: var(--erro); background: var(--g-alto); }
.botao-icone.sair svg { width: 16px; height: 16px; }

/* ---------- topo ---------- */

.topo {
  height: 56px;
  padding: 0 var(--e5);
  background: var(--g-base);
  border-bottom: 1px solid var(--borda);
}
.topo-direita { margin-left: auto; display: flex; align-items: center; gap: var(--e2); }

/* ---------- titulo de pagina ---------- */

/* A barra de ferramentas de cada tela vira o cabecalho da pagina: titulo
   grande a esquerda, acoes a direita. Assim nenhuma tela precisou ser
   reescrita para ganhar titulo. */
.barra-ferramentas {
  align-items: flex-start;
  padding-bottom: var(--e4);
  margin-bottom: var(--e5);
  border-bottom: 1px solid var(--borda);
}
.barra-ferramentas .titulo-secao {
  font-family: var(--fonte-texto);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.3px;
  color: var(--g-texto);
  text-transform: none;
}
.barra-ferramentas .titulo-secao::before { content: none; }
.barra-ferramentas .direita { align-items: center; }

.conteudo { padding: var(--e5) var(--e6) var(--e7); }

/* ---------- placas no estilo da referencia ---------- */

.p-placa {
  background: var(--g-base);
  border: 1px solid var(--borda);
}
.p-placa-num { font-size: 27px; letter-spacing: -.5px; }
.p-placa-rot { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; }

@media (max-width: 1000px) {
  .lateral-menu { width: 196px; }
  .conteudo { padding: var(--e4) var(--e4) var(--e6); }
}

@media print {
  .lateral-menu, .topo { display: none !important; }
}

/* ==========================================================================
   Quadro de producao — cores
   ==========================================================================
   As regras originais usavam --navy e --azul, que no tema escuro apontam para
   superficie e acento. Resultado: titulo de coluna quase invisivel e etiqueta
   de etapa com texto branco sobre fundo claro. Aqui elas voltam a apontar para
   os tokens de texto, que funcionam nos dois temas.
   ========================================================================== */

.coluna-kanban h3 { color: var(--g-texto); }
.coluna-kanban .peso-coluna { color: var(--g-fraco); }

/*
  O SELO GANHA A COR DO TIPO DE MATERIAL — ver matizDoMaterial, em telas.js.

  Todos os pilares da mesma cor, todas as vigas de outra: a coluna inteira passa
  a se ler por tipo, sem ninguem cadastrar cor nenhuma. A conta e a mesma que
  pinta a inicial do cliente.

  O tom e escuro e a letra clara no tema escuro, e o contrario no claro — a cor
  identifica, e quem tem que continuar legivel e o codigo.
*/
.cartao-kanban .ck-cliente { color: var(--g-texto); }
.cartao-kanban .obra { color: var(--g-fraco); }
.cartao-kanban .desc { color: var(--g-medio); }
.cartao-kanban footer { color: var(--g-fraco); border-top-color: var(--borda); }

.cartao-kanban .obs {
  background: var(--g-alto-2);
  border-left-color: var(--acento);
  color: var(--g-medio);
}

/* O quadro rola na horizontal quando nao cabe: coluna cortada pela metade,
   como estava a de entregues, e pior do que coluna que exige rolagem. */
.quadro { overflow-x: auto; padding-bottom: var(--e2); }
.coluna-kanban { min-width: 260px; }

.icone.entregas { background: #f0e6d4; color: #8a6a2f; }
:root:not([data-tema="claro"]) .icone.entregas { background: #3a2f18; color: #e8c07d; }

/* ---------- tela de entregas ---------- */

/* Agrupado por CLIENTE, nao por etapa: quem carrega o caminhao junta o que vai
   para o mesmo endereco, nao o que veio da mesma prancha. */
.grupo-entrega {
  border: 1px solid var(--borda);
  border-radius: var(--r2);
  margin-bottom: var(--e3);
  overflow: hidden;
}
.grupo-entrega:last-child { margin-bottom: 0; }

.grupo-entrega header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--g-alto);
  border-bottom: 1px solid var(--borda);
}
.grupo-entrega header b { display: block; font-size: 14px; color: var(--g-texto); }
.grupo-entrega header small { display: block; font-size: 11.5px; color: var(--g-fraco); }
.peso-grupo {
  font-family: var(--fonte-tecnica);
  font-size: 16px;
  font-weight: 700;
  color: var(--acento);
  white-space: nowrap;
}

.fichas-entrega { list-style: none; margin: 0; padding: 0; }
.fichas-entrega li {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--borda);
}
.fichas-entrega li:last-child { border-bottom: 0; }
.fichas-entrega li:hover { background: var(--g-alto); }

.fichas-entrega .etapa {
  flex: none;
  min-width: 62px;
  padding: 3px 8px;
  border-radius: var(--r1);
  background: var(--acento-fundo);
  color: var(--acento);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
}
.fichas-entrega .corpo { flex: 1; min-width: 0; }
.fichas-entrega .corpo b {
  display: block;
  font-size: 13px;
  color: var(--g-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fichas-entrega .corpo small { display: block; font-size: 11.5px; color: var(--g-fraco); }
.fichas-entrega .peso {
  flex: none;
  font-family: var(--fonte-tecnica);
  font-weight: 600;
  color: var(--g-texto);
  white-space: nowrap;
}
.fichas-entrega .acoes { flex: none; display: flex; gap: 6px; }

.botao-mini.perigo { color: #b3261e; }
.botao-mini.perigo:hover { border-color: #b3261e; background: #fdeceb; color: #b3261e; }
:root:not([data-tema="claro"]) .botao-mini.perigo { color: #e0857c; }
:root:not([data-tema="claro"]) .botao-mini.perigo:hover { background: #3a2220; border-color: #7a3b35; color: #f0a49b; }

/* ==========================================================================
   Cor da ficha, escolhida pela empresa
   ==========================================================================
   A ficha usava tres azuis cravados. Agora ela usa quatro variaveis que o app
   calcula a partir de UMA cor escolhida na tela Empresa. Os valores abaixo sao
   so o padrao, para a ficha nunca ficar sem cor se a identidade nao carregar.
   ========================================================================== */

:root {
  --ficha-escuro: #0d2b45;
  --ficha-medio:  #103454;
  --ficha-borda:  #b9d6ee;
  --ficha-claro:  #dcebf7;
}

.ficha, .bloco-auditoria {
  --navy: var(--ficha-escuro);
  --azul: var(--ficha-medio);
  --azul-borda: var(--ficha-borda);
  --azul-claro: var(--ficha-claro);
}

.ficha-topo { background: var(--ficha-escuro); color: var(--ficha-tinta-escuro, #fff); }
.ficha-topo .etiqueta-etapa { background: var(--ficha-medio); color: var(--ficha-tinta, #fff); }

/* A etiqueta usa a mesma cor da empresa que a ficha usa: quem recebe o amarrado
   e quem recebe o papel veem a mesma marca. */
.etq-topo { background: var(--ficha-escuro); color: var(--ficha-tinta-escuro, #fff); }
.etq-cliente { background: var(--ficha-claro); color: var(--ficha-escuro); }
.etq-material b { color: var(--ficha-escuro); }
.etq-material span { color: var(--ficha-medio); border-left-color: var(--ficha-medio); }
.cartao-barra { background: var(--ficha-medio); color: var(--ficha-tinta, #fff); }
.faixa-meta { background: var(--ficha-claro); border-bottom-color: var(--ficha-borda); }
.tabela-romaneio th { background: var(--ficha-escuro); color: var(--ficha-tinta-escuro, #fff); }
.resumo-etapa { background: var(--ficha-claro); border-color: var(--ficha-borda); }
.ficha .tabela-levantamento thead th {
  background: var(--ficha-escuro);
  color: var(--ficha-tinta-escuro, #fff);
}
.ficha .tabela-levantamento tfoot td { background: var(--ficha-claro); border-top-color: var(--ficha-medio); }

/* ---------- logo no cabecalho da ficha ---------- */

/* Altura fixa e largura livre: logo deitado ou quase quadrado ocupam o mesmo
   espaco vertical, e o cabecalho nao muda de altura conforme o arquivo. */
.logo-ficha {
  display: block;
  height: 52px;
  width: auto;
  max-width: 260px;
  margin-bottom: 10px;
  object-fit: contain;
}

/* ---------- tela da empresa ---------- */

.campo-hex { width: 92px; font-family: var(--fonte-tecnica); text-transform: uppercase; }
input[type="color"] {
  width: 46px;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--borda);
  border-radius: var(--r1);
  background: var(--g-alto);
  cursor: pointer;
}

.cores-sugeridas { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e3) 0 var(--e2); }
.amostra {
  width: 30px; height: 30px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff30, 0 1px 3px #00000033;
}
.amostra:hover { transform: scale(1.08); }
.amostra.ativa { border-color: var(--g-texto); }

.logo-lado-a-lado {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--e5);
  align-items: start;
}

/* Xadrez atras do logo: mostra na hora se o PNG tem fundo transparente ou se
   veio com um retangulo branco colado. */
.logo-previa {
  display: grid;
  place-items: center;
  min-height: 130px;
  padding: var(--e4);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--r2);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e8ecf0 25%, transparent 25%, transparent 75%, #e8ecf0 75%),
    linear-gradient(45deg, #e8ecf0 25%, transparent 25%, transparent 75%, #e8ecf0 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.logo-previa img { max-width: 100%; max-height: 90px; object-fit: contain; }
.logo-previa.vazia { color: var(--g-fraco); font-size: 12.5px; background-image: none; background-color: var(--g-alto); }

@media (max-width: 860px) {
  .logo-lado-a-lado { grid-template-columns: 1fr; }
}
.icone.empresa { background: #e2e7ee; color: #46586c; }
:root:not([data-tema="claro"]) .icone.empresa { background: #232c37; color: #93a6ba; }

/* ==========================================================================
   Na ficha, cor pinta FUNDO — nunca texto
   ==========================================================================

   A cor da empresa entrou pelos tokens da ficha, e junto com os fundos ela
   pintou tambem os textos: posicao da peca, subtotal, resumo por bitola. Numa
   cor forte ainda dava para ler; num verde ou num rosa claro, nao.

   Texto de documento tem uma cor so, e ela e preta. A cor da empresa fica onde
   ela identifica sem atrapalhar a leitura: cabecalho, barras dos elementos,
   faixas e contornos. Isso vale ainda mais no papel, onde o texto colorido sai
   mais claro do que na tela e a impressora economiza tinta.
   ========================================================================== */

.ficha, .bloco-auditoria { --tinta-doc: #14181d; }

.ficha .tabela-pecas tbody td:nth-child(1),
.ficha .tabela-pecas tfoot td,
.ficha .tabela-romaneio td:nth-child(1),
.ficha .pilula-bitola b,
.ficha .total-etapa .valor,
.ficha .resumo-etapa h3,
.ficha .faixa-meta b,
.ficha .tabela-levantamento .forte,
.ficha .tabela-levantamento .codigo-etapa,
.ficha .tabela-levantamento tfoot td,
.bloco-auditoria h3,
.bloco-auditoria .tabela-simples td:first-child {
  color: var(--tinta-doc);
}

/* O texto secundario continua cinza — nao colorido. */
.ficha .total-etapa .margem,
.ficha .rodape-ficha,
.ficha .dica,
.ficha .nota { color: #55606b; }

/* O desenho da peca e o plano de corte seguem a mesma regra, e ela esta
   resolvida na origem de cada um — ver "desenhos" e "plano de corte" acima.
   Aqui nao ha nada a corrigir depois. */

/* O cabecalho da ficha e a barra do elemento sao fundo colorido com texto por
   cima. O comentario aqui dizia que "o branco garante o contraste em qualquer
   tom que a empresa escolha" — e nao garante. Com a cor branca, a barra do
   elemento saia branco sobre branco: "1. P1 · 13,80 kg" simplesmente nao
   existia no papel, e nada na tela avisava.

   A tinta agora vem calculada da propria cor. Ver aplicarCorDaEmpresa(). */
.ficha-topo, .ficha-topo h1 { color: var(--ficha-tinta-escuro, #fff); }
.cartao-barra, .cartao-barra .nome, .cartao-barra .peso { color: var(--ficha-tinta, #fff); }
.tabela-romaneio th { color: var(--ficha-tinta-escuro, #fff); }
.ficha .tabela-levantamento thead th { color: var(--ficha-tinta-escuro, #fff); }

/* ---------- logo no painel ---------- */

/* Mesmo arquivo do cabecalho da ficha, aqui em cima do titulo. O painel e a
   primeira tela do dia: a marca da empresa aparece antes de qualquer numero. */
.p-topo .logo-painel {
  height: 76px;
  width: auto;
  max-width: 40%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* Em tela estreita a logo cede primeiro: ela ilustra, o botao age. */
@media (max-width: 720px) {
  .p-topo .logo-painel { height: 54px; max-width: 60%; }
}
.p-topo { flex-wrap: wrap; align-items: center; }

/* ==========================================================================
   Entregas — o caminhão do dia

   Mesma gramática do quadro de produção, de propósito: colunas lado a lado e
   cartão que se arrasta. Quem já usa o quadro não aprende nada novo aqui.

   A diferença é que a ORDEM dentro da coluna significa alguma coisa — é a ordem
   em que o caminhão para. Por isso cada cartão em rota leva o número na frente,
   e não só uma posição na pilha.
   ========================================================================== */

.quadro-entregas {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: var(--e3);
  margin-bottom: var(--e4);
}

/* ==========================================================================
   AS COLUNAS ROLAM POR DENTRO, A PAGINA NAO CRESCE
   --------------------------------------------------------------------------
   O quadro crescia junto com a fila: trinta entregas esperando viravam uma
   pagina de tres telas de altura. E ai arrastar parava de funcionar, porque
   arrastar exige as DUAS pontas visiveis ao mesmo tempo — quem segurava um
   cartao no fim da fila nao enxergava mais o caminhao do motorista.

   Agora cada coluna tem a altura da tela e rola por dentro. O cabecalho do
   motorista — nome, contagem, peso, botoes — fica parado no alto, e so a pilha
   de cartoes corre. A fila pode ter cem entregas que o quadro continua do
   tamanho da janela, com todos os motoristas a vista.
   ========================================================================== */

.coluna-rota {
  /*
    330px, e eram 300.

    A parada divide a largura com o numero, o peso e dois botoes: em 300 sobrava
    menos da metade para o nome, e "CONSTRUTORA SÃO JOSÉ LTDA" saia em tres
    andares. Os 30px a mais valem uma linha a menos em quase todo cartao.
  */
  flex: 0 0 330px;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--r2);
  background: var(--g-base);

  /* O desconto e a barra de ferramentas, o cabecalho da janela e o respiro de
     baixo. Abaixo de 320px a coluna deixaria de mostrar dois cartoes, e ai a
     rolagem interna atrapalharia mais do que ajuda. */
  max-height: max(320px, calc(100vh - 200px));
}

/* A fila de espera não é um caminhão: fica marcada para ninguém confundir
   "ainda não saiu" com "está no caminhão do fulano". */
.coluna-rota.fila-entrega {
  background: var(--g-alto);
  border-style: dashed;

  /* MAIS LARGA que as dos motoristas, e de proposito.

     A largura de 300px era a mesma para todas, e nesta coluna ela custava caro:
     "MATERIAL DE CONSTRUÇÃO SÃO BENTO LTDA" quebrava em tres linhas, o material
     em duas e o endereco em duas — 150px por cartao, tres por tela. Na coluna do
     motorista a mesma largura sobra, porque um caminhao leva oito paradas, nao
     trinta.

     Aqui e onde se LE para decidir; ali e onde se confere o que ja foi decidido.
     Dar a largura a quem precisa dela e o que faz caber o dobro de entregas sem
     encolher uma letra. */
  flex: 0 0 380px;
}

/* O cabecalho quebrava "Truck 3/4" e a placa em tres linhas de uma palavra:
   o bloco do nome e o dos botoes disputavam a mesma largura, e o nome cedia.
   Os botoes descem para a propria linha quando aperta; o nome nao quebra mais. */
.cr-topo {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px var(--e2);
}
.cr-topo > div:first-child { flex: 1 1 150px; min-width: 0; }
.cr-topo b {
  font-family: var(--fonte-tecnica);
  font-size: 15px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cr-topo small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--g-fraco);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cr-topo .placa {
  font-family: var(--fonte-tecnica);
  letter-spacing: .5px;
  color: var(--g-texto);
}

.cr-acoes { display: flex; flex-wrap: wrap; gap: 6px; }

/* A cor da coluna. Um tom por motorista, na bolinha e na barra do topo — o
   mesmo recurso do quadro de producao, para as duas telas se lerem igual. */
.coluna-rota { position: relative; overflow: hidden; }
.coluna-rota::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: hsl(calc(200 + var(--ordem, 0) * 47) 55% 58%);
}
.coluna-rota.fila-entrega::before { background: var(--g-risco-2); }

.cr-numeros b {
  font-family: var(--fonte-tecnica);
  font-size: 13px;
  color: var(--g-texto);
  font-variant-numeric: tabular-nums;
}

.cr-numeros {
  display: flex;
  gap: var(--e3);
  font-size: 11.5px;
  color: var(--g-fraco);
  font-variant-numeric: tabular-nums;
}

.cr-alerta {
  margin: 0;
  padding: 6px 9px;
  border-radius: var(--r1);
  background: #3b2a14;
  color: #e8c08a;
  font-size: 11.5px;
}
:root[data-tema="claro"] .cr-alerta { background: #fff2dd; color: #7a4a00; }

.pilha-rota {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  min-height: 90px;
  padding: 4px;
  border-radius: var(--r1);
  transition: background var(--rapido);

  /* A UNICA parte que rola. O "min-height: 0" e o que faz um filho de flex
     poder encolher abaixo do conteudo — sem ele o navegador estica a coluna
     inteira e a rolagem volta a ser a da pagina. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Barra de rolagem fina: cada coluna tem a sua, e tres barras grossas lado a
   lado comem largura que e do endereco. */
/*
  A ENTREGA NAO ENCOLHE. (A mesma armadilha do quadro de producao — ver
  ".pilha > .cartao-kanban".)

  A pilha e uma coluna flex, e item de flex encolhe quando a soma passa da
  altura. O quadro riscado tem "overflow: hidden" para as bordas de dentro
  pararem na curva — e overflow diferente de "visible" DESLIGA o
  "min-height: auto" que segura os outros. Com cinco entregas na fila, o fim de
  cada quadro era cortado: sumiam o "mandar para…" e o "Dar baixa", e nada na
  tela dizia por que.

  Medido: cartao de 163px de conteudo desenhado com 122px de altura.
*/
.pilha-rota > .cartao-entrega { flex: none; }

.pilha-rota::-webkit-scrollbar { width: 8px; }
.pilha-rota::-webkit-scrollbar-thumb {
  background: var(--borda-forte, #4a5666);
  border-radius: 4px;
}
.pilha-rota::-webkit-scrollbar-track { background: transparent; }

/* O cabecalho e os numeros nao rolam: e por eles que se sabe de qual motorista
   e a coluna, e some-los deixaria a pessoa arrastando para uma pilha anonima. */
.coluna-rota > .cr-topo,
.coluna-rota > .cr-numeros,
.coluna-rota > .cr-alerta,
.coluna-rota > .filtro-dia { flex: none; }
.pilha-rota.sobre { background: var(--acento-veu); outline: 1px dashed var(--acento); }

/* ---------- cartao de entrega ----------
   Era "display:flex" com os tres blocos soltos: sem o invólucro .ce-corpo, nome,
   selo e endereco viravam COLUNAS lado a lado e o nome do cliente quebrava em
   quatro linhas de uma palavra. A marca colorida e a mesma dos cartoes de
   cliente — o cliente tem uma cor so em todo o sistema, da lista ate o
   caminhao. */

.cartao-entrega {
  display: flex;
  align-items: flex-start;

  /* APERTADO DE PROPOSITO. Cada pixel de respiro aqui e multiplicado por trinta
     cartoes, e vira rolagem. O que NAO encolheu foi o texto: nome, material e
     endereco continuam do mesmo tamanho e continuam inteiros — o que saiu foi
     espaco vazio. */
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--g-risco-2);
  border-radius: var(--r2);
  background: var(--g-alto);
  cursor: grab;
  transition: border-color var(--rapido), transform var(--rapido);
}
.cartao-entrega:hover { border-color: var(--borda-forte); transform: translateY(-1px); }
.cartao-entrega.arrastando { opacity: .45; cursor: grabbing; }

.cartao-entrega .cc-marca {
  width: 24px; height: 24px;
  border-radius: 7px;
  font-size: 11px;
}

.cartao-entrega .ce-corpo { flex: 1; min-width: 0; }

/* ==========================================================================
   O CARTAO DA FILA MOSTRA TUDO
   --------------------------------------------------------------------------
   Tres cortes moravam aqui, e os tres comiam a informacao que faz o cartao
   servir para alguma coisa:

     o NOME       dividia a linha com os selos e era ele que cedia. "ANA
                  CAROLINA…", "MATERIAL DE…" — e o nome e o primeiro campo que
                  a pessoa le para achar a carga na fila.
     o MATERIAL   cortado em duas linhas.
     o ENDERECO   sem espaco proprio, espremido ao lado do peso.

   O cartao cresce alguns pixels quando o nome e comprido. E a troca certa:
   cartao que nao diz de quem e a carga nao economiza espaco nenhum — obriga a
   abrir outra tela para descobrir.
   ========================================================================== */

/* O nome ocupa a linha e o peso encosta na direita. "align-items: baseline"
   para as duas letras assentarem na mesma pauta mesmo com tamanhos diferentes. */
.ce-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 8px;

  /* O peso DESCE quando nao cabe ao lado do nome. Sem isto ele ficava fixo na
     linha e o nome era espremido ate sobrar menos que uma palavra. */
  flex-wrap: wrap;
}

.ce-nome {
  /* NAO PODE SER ESPREMIDO ATE SUMIR.

     Era "min-width: 0", que deixa o flex encolher o nome ate a largura de uma
     letra — e com a quebra por caractere ligada, "ELTON BOINA" saia empilhado
     em ELTO / N / BOIN / A. Foi visto na coluna do motorista, onde o cartao
     divide a largura com o numero da parada, o peso e dois botoes.

     Com um piso de 55%, o nome so quebra onde tem espaco, e o que cede e o
     peso, que desce uma linha e continua inteiro. */
  flex: 1 1 55%;
  min-width: 55%;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;

  /* Quebra por PALAVRA. Nome de cliente partido no meio — "CONSTRUT/ORA" — e
     pior do que uma linha a mais; o mesmo ja tinha sido decidido na folha da
     expedicao. */
  overflow-wrap: normal;
  word-break: normal;
}

/* Os selos na frente do material, na mesma linha. Quebra junto quando o
   material e comprido — o texto continua inteiro, so desce. */
.ce-carga {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 6px;
  margin-top: 2px;
}
.ce-carga small { margin: 0; flex: 1 1 120px; }

/* Os selos embaixo do nome, alinhados a esquerda: sao curtos, e "space-between"
   os jogava para a borda oposta com um vazio no meio. */
.ce-topo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 3px;
}
.ce-topo:empty { display: none; }

/* O seletor de motorista, compacto: ele e um atalho, nao o assunto do cartao. */
.ce-mandar select { padding: 1px 4px; font-size: 10.5px; height: 20px; }

.ce-tag {
  flex: none;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--acento-fundo);
  color: var(--acento);
  font-family: var(--fonte-tecnica);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
}
:root[data-tema="claro"] .ce-tag { color: var(--acento-claro); }

/* O numero do pedido: fundo neutro, porque ele nao classifica nada — so
   identifica. Cor de selo aqui competiria com a etapa e com o "de fora", que sao
   as duas coisas que mudam o que a pessoa faz com o cartao. */
.ce-tag.numero {
  background: var(--g-fundo-fraco, rgba(127, 141, 160, .18));
  color: var(--g-fraco);
}

/* Pedido de fora do sistema: cor propria, para ninguem procurar ficha dele. */
.ce-tag.fora { background: #2c2242; color: #c7aef0; text-transform: uppercase; }
:root[data-tema="claro"] .ce-tag.fora { background: #efe7fb; color: #5b3f96; }

/* O material INTEIRO. Duas linhas e o suficiente para quase tudo, mas quando
   nao e, o que sumia era o fim — e "vergalhao, tela e arame" virava "vergalhao,
   tela e". */
.cartao-entrega small {
  display: block;
  margin: 2px 0 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--g-fraco);
  overflow-wrap: break-word;
}

.ce-pe {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--g-fraco);
}
.ce-kg {
  flex: none;
  font-family: var(--fonte-tecnica);
  font-size: 12px;
  font-weight: 700;
  color: var(--g-texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* O endereco ganha a LINHA INTEIRA, embaixo do peso. Dividindo a linha com o
   peso ele ficava com uns 100px e quebrava em tres — o bairro no meio de uma
   frase quebrada nao salta, e e por ele que se agrupa o roteiro. */
/* O endereco pega a linha e empurra o seletor para a direita; quando nao cabem
   os dois, o seletor desce e o endereco continua inteiro. */
/* Duas linhas no maximo, e o resto com reticencias: um endereco comprido
   ocupava quatro linhas e empurrava o cartao seguinte para fora da tela. A
   linha inteira continua no "title" e na lista do dia, que e onde se confere. */
.ce-endereco {
  flex: 1 1 150px;
  line-height: 1.4;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* O bairro em negrito, aqui como na folha da expedicao: o mesmo destaque nos
   dois lugares, para a pessoa reconhecer sem reaprender. */
.ce-endereco .bairro { color: var(--g-texto); font-weight: 700; }
.ce-endereco .cidade { font-style: normal; }

/* Parada sem endereço não entra no mapa. Vermelho porque não é detalhe: é a
   diferença entre o caminhão achar a obra e não achar. */
.ce-endereco.falta, .lista-roteiro .falta { color: #ff9d8f; font-weight: 600; }
:root[data-tema="claro"] .ce-endereco.falta,
:root[data-tema="claro"] .lista-roteiro .falta { color: #b3261e; }

.cartao-entrega.de-fora { border-left-color: #b79ae8; }
.cartao-entrega.sem-endereco,
.cartao-entrega.de-fora.sem-endereco { border-left-color: #d15b4f; }

.ordem-parada {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--acento);
  color: #08131d;
  font-family: var(--fonte-tecnica);
  font-size: 12px;
  font-weight: 700;
}
:root[data-tema="claro"] .ordem-parada { color: #fff; }

.cartao-entrega .tirar { flex: none; padding: 2px 7px; line-height: 1; }

/* ==========================================================================
   MANDAR PARA O MOTORISTA SEM ARRASTAR
   --------------------------------------------------------------------------
   Discreta de proposito: arrastar continua sendo o gesto principal de quem ja
   se acostumou, e uma caixa grande em cada cartao competiria com a pega. Ela
   fica no canto, do tamanho de um selo, e so acende ao passar o mouse — mas no
   TABLET, onde nao ha mouse e arrastar e mais dificil, ela e sempre visivel.
   ========================================================================== */

/* Dentro do corpo do cartao, ocupando a largura dele: ao lado do texto, numa
   coluna de 170px, ela roubava a largura do nome do cliente — que saia uma
   letra por linha. */
.ce-mandar { flex: none; margin-left: auto; }

.ce-mandar select {
  width: 100%;
  max-width: 100%;
  padding: 2px 4px;
  border: 1px solid var(--borda);
  border-radius: 4px;
  background: var(--g-fundo);
  color: var(--g-fraco);
  font-family: inherit;
  font-size: 10.5px;
  cursor: pointer;
  opacity: .55;
  transition: opacity var(--rapido), border-color var(--rapido);
}
.cartao-entrega:hover .ce-mandar select,
.ce-mandar select:focus { opacity: 1; border-color: var(--acento); color: var(--g-texto); }

/* Sem mouse nao ha "passar por cima": no toque ela precisa estar visivel
   sempre, senao vira um botao que ninguem descobre. */
@media (hover: none) {
  .ce-mandar select { opacity: 1; }
}

/* Os dois botoes embaixo da lista de entregas ja feitas. */
.mais-entregues {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

/* ---------- a janela do QR ---------- */

.painel-qr { max-width: 460px; text-align: center; }

.qr-caixa {
  display: flex;
  justify-content: center;
  padding: var(--e3);
  margin: var(--e3) 0;
  background: #fff;
  border-radius: var(--r2);
}
.qr-caixa .qr { display: block; }

.lista-roteiro {
  text-align: left;
  margin: var(--e3) 0 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.lista-roteiro li { font-size: 12.5px; }
.lista-roteiro b { display: block; }
.lista-roteiro small { display: block; color: var(--g-fraco); font-size: 11.5px; }
.lista-roteiro span { font-size: 11.5px; color: var(--g-fraco); }

@media print {
  /* O roteiro impresso serve de espelho do QR: se o celular do motorista
     descarregar, o papel continua dizendo a ordem e os endereços. */
  .fundo-painel { position: static; background: none; display: block; }
  .painel-qr { max-width: none; box-shadow: none; border: 0; }
  .painel-qr .acoes-form { display: none !important; }
  .painel-qr .link-rota { display: none !important; }
  .painel-qr .link-rota + .dica { display: none !important; }
  .qr-caixa .qr { width: 240px; height: 240px; }
}

/* ==========================================================================
   Agenda de entregas — o mês em grade, a lista num clique

   A casinha do dia responde só o que a grade responde bem: quantas e quanto
   pesa, mais três miniaturas para dar cara ao dia e poder arrastar. Ler o dia
   inteiro é clicar nele — ali há espaço de sobra e a linha cabe inteira.

   A primeira versão punha todas as entregas dentro da casinha: dez entregas
   viravam dez tarjas de dois milímetros com o nome cortado.
   ========================================================================== */

.agenda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: var(--e3);
  align-items: start;
  margin-bottom: var(--e4);
}

/* Abaixo de 1100px o mês fica com menos de 130px por coluna, e aí a pilha dos
   sem data desce para debaixo dele em vez de continuar roubando largura. */
@media (max-width: 1100px) {
  .agenda { grid-template-columns: minmax(0, 1fr); }
}

.mes {
  border: 1px solid var(--borda);
  border-radius: var(--r2);
  background: var(--g-base);
  padding: var(--e3);
}

.mes-topo { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.mes-topo b { font-family: var(--fonte-tecnica); font-size: 17px; }
.mes-topo b::first-letter { text-transform: uppercase; }
.dica-agenda { margin-left: auto; font-size: 11px; color: var(--g-fraco); }

.grade-semana, .grade-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.grade-semana {
  margin-bottom: 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--g-fraco);
  text-align: center;
}

.dia {
  min-height: 96px;
  padding: 6px;
  border: 1px solid var(--borda);
  border-radius: var(--r2);
  background: var(--g-alto);
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: background var(--rapido), border-color var(--rapido);
}
.dia.fora { background: transparent; border-color: transparent; min-height: 0; }

/* Fim de semana some para o fundo: a fábrica não entrega no domingo, e a casinha
   existe só para o caso raro em que entrega. */
.dia.fim-de-semana { background: transparent; border-style: dashed; }
.dia.fim-de-semana .numero-dia { opacity: .5; }

.dia.com-entrega { cursor: pointer; background: var(--g-alto-2); }
.dia.com-entrega:hover { border-color: var(--acento); }
.dia.sobre { background: var(--acento-veu); border-color: var(--acento); }

/* HOJE tem que se achar de longe, numa grade de trinta casinhas iguais. O
   contorno sozinho se perdia entre as bordas das vizinhas: o número ganha um
   disco cheio, que é a marca que o olho procura num calendário. */
.dia.hoje { border-color: var(--acento); }
.dia.hoje .numero-dia {
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--acento);
  color: #0b1b2b;
}
:root[data-tema="claro"] .dia.hoje .numero-dia { color: #fff; }

.dia header { display: flex; align-items: center; gap: 5px; }
.numero-dia {
  font-family: var(--fonte-tecnica);
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  color: var(--g-texto);
}

/* O peso do dia, no canto oposto ao número. Antes ficava colado nele — "6 1 ·
   444 kg" lia-se como um número só. Quantas entregas são, as próprias
   miniaturas dizem; o que a grade não tem como dizer é o peso. */
.conta-dia {
  margin-left: auto;
  font-family: var(--fonte-tecnica);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--g-medio);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Um ponto, e não um texto: a casinha não tem largura para "1 sem endereço", e
   o ponto vermelho já manda a pessoa abrir o dia. */
.ponto-falta {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff9d8f;
  flex: none;
}
:root[data-tema="claro"] .ponto-falta { background: #b3261e; }

.entregas-do-dia { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }

/* A COR DO CLIENTE, a mesma do cartão dele e do cadastro: duas entregas do
   mesmo cliente na semana se reconhecem sem ler o nome. */
/*
  A MINIATURA NAO E MAIS TINGIDA PELO CLIENTE.

  Cada entrega vinha com uma tarja colorida e o fundo no tom do cliente: num mes
  cheio, a grade virava um mosaico de oito cores e o olho nao achava mais nada —
  a cor dizia "de quem e", que e a pergunta que ninguem faz olhando o mes.

  O que se pergunta e QUANTO cai em cada dia e O QUE JA ESTA PRONTO. O quanto
  esta na barra de carga e no "3 · 3.750 kg"; o que esta pronto esta no ponto de
  situacao. Tudo o mais fica cinza, e a cor volta a querer dizer alguma coisa.
*/
.mini-entrega {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 7px;
  border-radius: var(--r1);
  border: 1px solid var(--borda);
  background: var(--g-alto);
  font-size: 10.5px;
  cursor: grab;
}
.mini-entrega:hover { border-color: var(--borda-forte); }

.mini-entrega b {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--g-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-entrega small {
  flex: none;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--g-medio);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.mini-entrega b { line-height: 1.3; }
.mini-entrega.arrastando { opacity: .45; cursor: grabbing; }

/* Pedido de fora continua marcado — mas num risco fino a esquerda, nao numa
   tarja: ele diz so "isto nao e producao nossa". Falta de endereco e "ainda na
   bancada" ja estao no ponto de situacao, que e onde a cor significa algo. */
.mini-entrega.de-fora { border-left: 2px solid var(--g-risco-2); }
.mini-entrega.na-bancada b { opacity: .8; }

.mais-n {
  padding-left: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--g-fraco);
}

.sem-data {
  border: 1px dashed var(--borda);
  border-radius: var(--r2);
  background: var(--g-alto);
  padding: var(--e3);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
}
.sem-data header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); }
.sem-data b { font-family: var(--fonte-tecnica); font-size: 15px; }
.sem-data small { font-size: 11px; color: var(--g-fraco); }
.sem-data.sobre { background: var(--acento-veu); border-color: var(--acento); border-style: solid; }

/* ---------- a lista de um dia, por cima do calendário ---------- */

/* O painel padrão tem 420px, largura de formulário. A lista do dia é outra
   coisa: cada linha carrega cliente, obra, etapa, peso, endereço E três botões
   de data. Em 420px tudo quebra em três linhas e a lista deixa de ser lista. */
/* ==========================================================================
   A JANELA DO DIA
   --------------------------------------------------------------------------
   Um dia cheio tem dez, doze entregas. A janela abria com 720px e a lista
   rolava dentro de uma caixa de 52vh: cinco linhas visiveis de onze, DUAS
   barras de rolagem, e para conferir o dia era preciso rolar dentro de uma
   janela que ja rolava.

   Agora a janela ocupa quase a tela e a lista nao tem caixa propria — quem rola
   e a janela, uma barra so. E a linha deixou de empilhar tudo: com largura
   sobrando, o endereco vai para a SEGUNDA COLUNA em vez de virar a quarta linha.
   Foram 127px por linha para cerca de 60, e um dia de onze entregas passa a
   caber inteiro.
   ========================================================================== */

.painel-dia { width: min(1240px, 96vw); padding: 16px 18px; }

/* A moldura da janela do dia foi apertada pelo mesmo motivo da linha: cada
   pixel de titulo e de respiro e uma entrega a menos na tela. O titulo e a
   contagem passaram a dividir a mesma linha. */
.painel-dia h2 { margin: 0 0 2px; font-size: 17px; }
.painel-dia > .dica { margin: 0 0 6px; }
.painel-dia .acoes-form { margin-top: 10px; }

.linhas-entrega {
  list-style: none;
  margin: var(--e3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   A LISTA DE ENTREGAS DO DIA
   --------------------------------------------------------------------------
   Aqui se MONTA O ROTEIRO: as entregas do mesmo bairro vao uma embaixo da
   outra, e essa ordem e a que sai na folha da expedicao. Para isso a pessoa
   precisa ver o dia INTEIRO de uma vez — arrastar a de baixo para cima nao
   funciona quando a de cima esta fora da tela.

   Por isso a linha e UMA LINHA. Ja foi um bloco de 127px com o endereco
   empilhado (5 entregas na tela), depois 62px em duas colunas (11 entregas).
   Agora e uma faixa de 28px: cabem quase trinta.

   O que sumiu para caber: os botoes escritos viraram icones de 22px, e o
   seletor de data virou o quadradinho do calendario. Nada perdeu funcao — o
   titulo de cada um diz o que faz, e o que estava escrito continua no "title".

   Cada coluna tem largura propria e corta com reticencias. Cliente e endereco
   sao os que crescem, porque sao os dois que a pessoa le para decidir a ordem.
   ========================================================================== */

/* ==========================================================================
   A LISTA DE ENTREGAS DO DIA
   --------------------------------------------------------------------------
   Aqui se MONTA O ROTEIRO: as entregas do mesmo bairro uma embaixo da outra, e
   essa ordem e a que sai na folha. Para isso e preciso ver muita entrega de uma
   vez — arrastar a de baixo para cima nao funciona quando a de cima esta fora
   da tela.

   O caminho ate aqui, porque cada passo ensinou uma coisa:

     bloco de 127px    endereco empilhado embaixo do cliente. 5 na tela.
     62px, 2 colunas   melhor, mas ainda pouco.
     25px, 1 linha     cabiam 30 — e nao serviu: tudo espremido, o material
                       quebrando em duas linhas quando havia carona, e o bairro
                       cortado no fim da frase.

   Agora sao DUAS LINHAS numa grade fixa, ~42px. Cabe menos que 30, e le-se de
   verdade: nada quebra, nada estoura, e cada coluna comeca no mesmo lugar em
   todas as linhas.

   A COLUNA DA DIREITA E DO ENDERECO, e o bairro fica EM CIMA, em negrito, com a
   rua embaixo. Sao os bairros alinhados em coluna que fazem as entregas do mesmo
   lado da cidade saltarem da lista.
   ========================================================================== */

.linha-entrega {
  display: grid;
  grid-template-columns: auto minmax(0, 1.15fr) minmax(0, 1.45fr) auto auto;
  grid-template-areas:
    "ordem cliente bairro kg acoes"
    "ordem carga   rua    kg acoes";
  align-items: center;
  column-gap: 12px;
  padding: 5px 10px;
  background: var(--g-alto);
  border-left: 3px solid var(--acento);
  border-bottom: 1px solid var(--g-fundo);
  font-size: 12px;
}
.linha-entrega.de-fora { border-left-color: #b79ae8; }
.linha-entrega.sem-endereco { border-left-color: var(--erro); }
.linha-entrega.em-producao { border-left-color: var(--aviso, #c98a12); }
.linha-entrega:first-child { border-radius: 5px 5px 0 0; }
.linha-entrega:last-child { border-bottom: 0; border-radius: 0 0 5px 5px; }

/* ---------- a ordem ---------- */

.le-ordem { grid-area: ordem; display: flex; align-items: center; gap: 6px; }
.le-pega { color: var(--g-fraco); cursor: grab; letter-spacing: -2px; }
.le-numero {
  min-width: 20px; text-align: right;
  font-size: 14px; font-weight: 700;
  color: var(--g-fraco); font-variant-numeric: tabular-nums;
}

/* Empilhadas: agora a linha tem duas alturas de texto, e as setas cabem uma
   sobre a outra sem esticar nada. */
.le-setas { display: grid; gap: 2px; }
.le-seta {
  width: 18px; height: 16px;
  padding: 0; display: grid; place-items: center;
  border: 1px solid var(--borda); border-radius: 3px;
  background: var(--g-fundo); color: var(--g-fraco);
  font-size: 6px; line-height: 1; cursor: pointer;
}
.le-seta:hover:not(:disabled) { color: var(--acento); border-color: var(--acento); }
.le-seta:disabled { opacity: .25; cursor: default; }

/* ---------- quem e o que ---------- */

.le-cliente {
  grid-area: cliente; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; font-size: 12.5px;
}
.le-carga {
  grid-area: carga; min-width: 0;
  display: flex; align-items: baseline; gap: 6px;
  white-space: nowrap;
  color: var(--g-fraco);
}

/* O numero do pedido, na frente da carga. Nao encolhe e nao quebra: ele fica na
   mesma posicao em todas as linhas, e e correndo essa coluna que se acha o
   pedido que o cliente citou no telefone. */
.le-pedido {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--g-alto);
  color: var(--g-medio, var(--g-texto));
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* O nome da obra encolhe; o selo da carona, nao. Se o nome for comprido, quem
   perde texto e ele — a carona e curta e e informacao de carregamento. */
.le-obra { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Selo, e nao texto solto: emendado no nome da obra, "Mauro e Cibele + prego e
   arame (999 kg)" lia-se como se a obra se chamasse assim. O contorno diz que
   sao duas coisas de origens diferentes. */
.le-extras {
  flex: none;
  padding: 0 5px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-style: normal;
  font-size: 10px;
  color: var(--acento-claro);
  opacity: .9;
}
:root[data-tema="claro"] .le-extras { color: var(--acento); }

/* ---------- para onde vai ---------- */

/* ==========================================================================
   O ENDERECO INTEIRO, SEM RETICENCIAS
   --------------------------------------------------------------------------
   As duas colunas cortavam com "…" para caber mais entrega na tela. O que o "…"
   comia era o fim do endereco — e o fim e onde mora o complemento: "fundos",
   "ao lado do posto", o numero do lote. Quem monta o roteiro ficava com meio
   endereco e sem saber que faltava metade.

   Agora a linha CRESCE quando o endereco e comprido, e so nesse caso. Como
   bairro e cidade passaram a ter campo proprio, cada uma destas duas ficou mais
   curta do que era a frase inteira: na pratica quase nenhuma linha cresce, e a
   que cresce e justamente a que tinha informacao a perder.
   ========================================================================== */

.le-bairro {
  grid-area: bairro; min-width: 0;
  overflow-wrap: break-word;
  font-weight: 700; font-size: 12.5px;
  color: var(--g-texto);
}
.le-bairro.falta { color: var(--erro); }

.le-rua {
  grid-area: rua; min-width: 0;
  overflow-wrap: break-word;
  color: var(--g-fraco);
}

/* As duas colunas do endereco encostam no topo da faixa: com uma delas em duas
   linhas, centralizado deixaria bairro e rua desencontrados de uma entrega para
   a outra — e e o alinhamento entre linhas que faz o bairro repetido saltar. */
.linha-entrega { align-items: start; }
.le-ordem, .le-kg, .le-acoes, .le-cliente, .le-carga { align-self: center; }

/* ---------- peso e situacao ---------- */

.le-kg {
  grid-area: kg; text-align: right; white-space: nowrap;
  display: grid; gap: 1px; min-width: 74px;
}
.le-kg b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.le-kg i { font-style: normal; font-size: 10px; color: var(--g-fraco); }
.linha-entrega.em-producao .le-kg i { color: var(--aviso, #c98a12); font-weight: 700; }

/* ---------- o que fazer com ela ---------- */

.le-acoes { grid-area: acoes; display: flex; align-items: center; gap: 3px; }

/* Icone no lugar do botao escrito: "+1 dia", "sem data", "Editar" e "Excluir"
   somavam 260px por linha — mais que o endereco inteiro. O que estava escrito
   continua no "title" de cada um. */
.le-icone {
  height: 22px; min-width: 24px;
  padding: 0 4px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--borda); border-radius: 4px;
  background: var(--g-fundo); color: var(--g-fraco);
  font: inherit; font-size: 11px; line-height: 1;
  cursor: pointer;
}
.le-icone:hover { color: var(--acento); border-color: var(--acento); }
.le-icone.perigo:hover { color: var(--erro); border-color: var(--erro); }

/* O campo de data fica invisivel POR CIMA do icone: o clique abre o calendario
   do navegador sem codigo nenhum. */
.le-icone.escolher-data { position: relative; overflow: hidden; }
.le-icone.escolher-data input[type="date"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; border: 0; padding: 0;
  cursor: pointer;
}

/* Ficha da produção não se exclui daqui: ela nasceu no quadro, e apagar deste
   lado destruiria trabalho que a bancada já fez. O rótulo ocupa o lugar do
   botão para a linha não ficar torta ao lado das que têm. */
.so-producao {
  font-size: 10.5px;
  color: var(--g-fraco);
  padding: 0 6px;
  white-space: nowrap;
}

.sem-data.com-entrega { cursor: pointer; }
.sem-data.com-entrega:hover { border-color: var(--acento); border-style: solid; }

/* Largura suficiente para o dia caber por extenso. Estreito, o campo mostrava
   "2ξ" — e data pela metade é pior do que data nenhuma. */
.escolher-data input[type="date"] {
  width: 124px;
  padding: 4px 6px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: transparent;
  color: var(--g-texto);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.escolher-data input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.7);
  cursor: pointer;
}
:root[data-tema="claro"] .escolher-data input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none;
}

@media (max-width: 1100px) { .agenda { grid-template-columns: 1fr; } }

@media print {
  .agenda { grid-template-columns: 1fr; }
  .mes-topo button, .dica-agenda { display: none !important; }
  .dia { break-inside: avoid; }
}

/* ---------- endereço de entrega, no cabeçalho da obra ----------

   Fica à vista e não escondido num menu porque é a informação que faltava para
   o caminhão sair: obra sem endereço vira parada que o mapa pula. Vazio aparece
   em vermelho pelo mesmo motivo. */

.endereco-obra {
  display: block;
  width: 100%;
  margin-top: var(--e2);
  padding: 7px 9px;
  text-align: left;
  border: 1px solid var(--borda);
  border-radius: var(--r1);
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--rapido);
}
.endereco-obra:hover { border-color: var(--acento); }
.endereco-obra:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.rotulo-endereco {
  display: block;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--g-fraco);
}
.valor-endereco { display: block; font-size: 11.5px; line-height: 1.35; }

.endereco-obra.vazio { border-style: dashed; border-color: var(--erro); }
.endereco-obra.vazio .valor-endereco { color: var(--erro); }

/* ---------- filtro por dia na fila de entrega ----------

   O caminhão sai com o que foi prometido para HOJE, não com tudo que está
   pronto. Sem o filtro, montar a carga do dia é caçar no meio de trinta fichas
   quais são as de hoje — e o erro nesse caso é carregar o que não era. */

.filtro-dia { display: flex; align-items: center; gap: var(--e2); }
.filtro-dia label { display: flex; align-items: center; gap: 6px; }
.filtro-dia span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--g-fraco); }

.filtro-dia input[type="date"] {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: transparent;
  color: var(--g-texto);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.filtro-dia input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }
:root[data-tema="claro"] .filtro-dia input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }

/* Quem ficou de fora precisa ser dito. Filtro que esconde em silêncio faz a
   pessoa achar que a ficha sumiu do sistema. */
.cr-numeros .escondidos { color: var(--g-fraco); font-style: italic; }

/* ==========================================================================
   Etiquetas de amarrado

   DEITADA: 15 × 10 cm ou 12 × 10 cm. A etiqueta enrola no vergalhão, e o
   vergalhão é comprido — texto na horizontal acompanha a peça e se lê sem virar
   a cabeça. Em pé, o nome do elemento ficaria espremido na largura de 10 cm.

   Mesmo tema da ficha: faixa navy no topo com o logo, corpo branco. Quem recebe
   o amarrado e quem recebe a ficha veem a mesma marca — é o mesmo papel da mesma
   empresa, e o cliente reconhece antes de ler.

   Uma etiqueta por página, no tamanho exato do papel. Folha A4 picotada exigiria
   conhecer o picote de cada marca; assim funciona em impressora de etiqueta e em
   qualquer papel cortado no tamanho.
   ========================================================================== */

.folha-etiquetas {
  --etq-larg: 15cm;
  --etq-alt: 10cm;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  align-items: center;
  padding: var(--e3) 0;
}
.folha-etiquetas.menor { --etq-larg: 12cm; }
.folha-etiquetas.p10x8 { --etq-larg: 10cm; --etq-alt: 8cm; }

.etiqueta {
  position: relative;
  width: var(--etq-larg);
  height: var(--etq-alt);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--linha);
  border-radius: 3px;
  overflow: hidden;
}

/* A faixa do topo é a da ficha: navy, logo à esquerda, obra à direita. */
.etq-topo {
  display: flex;
  align-items: center;
  gap: 0.4cm;
  padding: 0.35cm 0.5cm;
  background: var(--navy);
  color: #fff;
  min-height: 1.7cm;
}
.etq-logo { max-height: 1.1cm; max-width: 3cm; object-fit: contain; }
.etq-sem-logo { display: block; width: 3cm; height: 1.1cm; flex: none; }

.etq-obra {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 10pt;
  font-weight: 600;
  line-height: 1.15;
  text-transform: uppercase;
}
.etq-obra small {
  display: block;
  font-size: 8pt;
  font-weight: 400;
  text-transform: none;
  color: #cfe2f5;
}

.etq-cliente {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3cm;
  padding: 0.22cm 0.5cm;
  background: var(--azul-claro, #dcebf7);
  color: var(--navy);
  font-size: 13pt;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}
.etq-cliente > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Elemento repetido não vira duas etiquetas iguais: a quantidade vem escrita.
   Duas etiquetas idênticas só gastam papel e fazem a pessoa procurar diferença
   entre elas. */
.etq-un {
  flex: none;
  font-size: 11pt;
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--navy);
  color: #fff;
}

.etq-corpo { flex: 1; display: flex; align-items: stretch; min-height: 0; }

/* O que a pessoa lê de longe. Sozinho ocupa a etiqueta toda; com os desenhos ao
   lado, recua para uma coluna e continua sendo a primeira coisa que se vê. */
.etq-material {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4cm;
  padding: 0.2cm 0.5cm;
}
.etq-material b {
  font-size: 42pt;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--navy);
}
.etq-material span {
  font-size: 22pt;
  font-weight: 600;
  color: var(--azul, #195788);
  border-left: 2px solid var(--azul, #195788);
  padding-left: 0.35cm;
}

/* ---------- a versão com as peças desenhadas ---------- */

.com-desenho .etq-corpo { align-items: stretch; }

.com-desenho .etq-material {
  flex: 0 0 4.6cm;
  flex-direction: column;
  gap: 0.05cm;
  border-right: 1px solid var(--azul-borda, #b9d6ee);
}
.com-desenho .etq-material b { font-size: 30pt; }

/* Nome de elemento nem sempre é "V1": há etapa em que ele vem descritivo
   ("Estacas Ø30cm (47x)"). O corpo cede à medida do texto em vez de quebrar em
   três linhas — e quem quiser um nome curto tem o botão Editar. */
.etq-material.nome-medio b { font-size: 30pt; }
.etq-material.nome-longo b { font-size: 20pt; letter-spacing: 0; }
.com-desenho .etq-material.nome-medio b { font-size: 21pt; }
.com-desenho .etq-material.nome-longo b { font-size: 14pt; letter-spacing: 0; }
.com-desenho .etq-material span {
  font-size: 15pt;
  border-left: 0;
  padding-left: 0;
}

.etq-pecas {
  flex: 1;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0.15cm 0.4cm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.05cm;
  overflow: hidden;
}
.etq-pecas li {
  display: grid;
  grid-template-columns: 0.7cm 1fr 1.1cm 1.1cm;
  align-items: center;
  gap: 0.15cm;
  font-size: 8pt;
}
.etq-pos { font-weight: 700; color: var(--navy); }

/* O desenho vem com largura fixa do desenhador; aqui ele se ajusta à coluna. */
.etq-desenho svg { width: 100%; height: auto; max-height: 0.75cm; display: block; }
.etq-desenho .desenho { margin: 0; }

.etq-bitola { text-align: right; color: var(--azul, #195788); font-weight: 600; }
.etq-qtde { text-align: right; font-weight: 700; font-size: 10pt; color: var(--navy); }
.etq-qtde small { font-size: 6.5pt; font-weight: 400; margin-left: 1px; }

/* Etiqueta corrigida à mão fica marcada na tela — não no papel. Quem imprime
   precisa saber que aquele texto não é mais o que o levantamento diz; quem
   recebe o amarrado na obra não tem nada com isso. */
.etiqueta.corrigida { box-shadow: 0 0 0 2px var(--acento); }

/* Canto de baixo à esquerda: em cima ele tapava o nome da obra, que é
   justamente o que a faixa tem para dizer. */
.editar-etiqueta { position: absolute; left: 8px; bottom: 8px; z-index: 1; }

@media print {
  /* A PAGINA DA ETIQUETA tem o tamanho dela, e a da ficha continua A4. Pagina
     nomeada existe justamente para isto: imprimir os dois numa tirada so, cada
     um no seu papel.

     Uma pagina por tamanho de papel. Antes havia so a de 15x10, e a etiqueta de
     12 saia numa pagina declarada de 15: a impressora alimentava 15 cm de papel
     para uma etiqueta de 12, e sobrava faixa em branco. */
  @page etiqueta10x8 { size: 10cm 8cm;  margin: 0; }
  @page etiqueta12   { size: 12cm 10cm; margin: 0; }

  .folha-etiquetas { padding: 0; gap: 0; display: block; }

  .etiqueta {
    /* O padrao e o 10x8, que e o tamanho que a empresa usa. Antes o padrao era
       15x10 — um tamanho que nem existe mais na tela: bastava uma classe faltar
       para a impressora puxar 15 cm de etiqueta para imprimir uma de 8. */
    page: etiqueta10x8;
    width: 10cm;
    height: 8cm;

    border: 0;
    border-radius: 0;
    box-shadow: none;

    /* NAO "break-before: page".

       Com ele, a primeira etiqueta empurrava uma pagina em branco antes de si.
       Em folha A4 isso e uma folha desperdicada; em rolo termico e uma etiqueta
       perdida no comeco de TODA impressao — adesivo que sai em branco e vai
       para o lixo antes de a primeira peca ser etiquetada. O corte depois de
       cada uma, menos a ultima, ja separa todas. */
    break-after: page;

    /* A altura e exatamente a da pagina. Meio pixel de arredondamento a mais
       joga o resto para uma segunda pagina — no rolo, uma etiqueta em branco
       entre cada duas boas. O "hidden" garante que nada empurre. */
    overflow: hidden;
    box-sizing: border-box;
  }

  .folha-etiquetas.menor .etiqueta { page: etiqueta12; width: 12cm; height: 10cm; }

  .etiqueta:last-child { break-after: auto; }
  .editar-etiqueta { display: none !important; }

  /* Impressora termica e monocromatica: a faixa colorida sai como bloco escuro
     solido. O fundo TEM que sair mesmo assim, senao o texto branco em cima dele
     imprime em branco sobre branco e a etiqueta sai vazia. */
  .folha-etiquetas * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* O excluir dentro do cartão do cliente. Fica discreto até o mouse chegar: o
   cartão inteiro é clicável para abrir, e um botão vermelho sempre à vista
   competiria com a ação que a pessoa quer em 99 dos 100 cliques. */
.cartao-cliente .excluir-no-cartao {
  flex: none;
  /* Redondo e pequeno: ele mora no rodape, ao lado de numeros, e um botao com a
     palavra "Excluir" ali roubaria a linha do peso. */
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--rapido);
}
.cartao-cliente:hover .excluir-no-cartao,
.cartao-cliente .excluir-no-cartao:focus-visible { opacity: 1; }


/* Tabela de lista dentro da folha rola de lado quando não cabe.

   Sem isto, a última coluna some ALÉM da borda — e não some cortada, some
   inalcançável: a folha não rolava, então o botão de excluir existia no HTML,
   ocupava lugar na tela e nenhum clique chegava nele. Foi assim que o "Excluir"
   dos levantamentos nasceu invisível. */
.folha:has(> .tabela-lista) { overflow-x: auto; }
.tabela-lista { min-width: 100%; }

/* A coluna de ações não encolhe nem quebra: é ela que some primeiro quando o
   navegador tenta espremer a tabela. */
.tabela-lista td.acoes-linha {
  white-space: nowrap;
  width: 1%;
}


/* ---------- o x que tira uma posicao do elemento ----------
   Visivel de verdade, nao um cinza apagado no canto. A primeira versao ficava em
   38% de opacidade para nao virar ruido numa ficha de trinta posicoes — e o
   usuario pediu o botao de novo, o que quer dizer que ele estava la e nao foi
   encontrado. Discreto demais e igual a inexistente. */

.apagar-peca {
  margin-left: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  vertical-align: middle;
  border: 1px solid #e2c3c1;
  border-radius: 6px;
  background: #fdf1f0;
  color: #b3261e;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}

.apagar-peca:hover { background: #b3261e; border-color: #b3261e; color: #fff; }
.apagar-peca:focus-visible { outline: 2px solid #b3261e; outline-offset: 1px; }

/* A coluna da posicao e estreita, e o x nao cabia ao lado do "N1" com o selo:
   caia para a linha de baixo e engordava a altura da linha inteira. */
.tabela-pecas td:first-child { white-space: nowrap; }


/* ==========================================================================
   Etiqueta modelo "faixa"
   ==========================================================================
   Copiada de uma etiqueta de papelaria que a empresa ja usava: o cartao inteiro
   na cor da marca, logo e contato no alto, e dois campos brancos arredondados —
   CLIENTE e MATERIAL. Na original os campos vao vazios, para preencher a caneta.
   Aqui saem escritos.

   O rotulo continua impresso ("Cliente:", "Material:") mesmo com o valor ao
   lado. Quem trabalha na bancada ja conhece essa etiqueta de olho: tirar o
   rotulo mudaria o formato que a pessoa aprendeu a ler de longe.
   ========================================================================== */

.etiqueta.faixa {
  background: var(--ficha-medio);
  border-color: var(--ficha-escuro);
  padding: 0.35cm;
  gap: 0.28cm;
}

.etiqueta.faixa .etqf-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12cm;
  padding: 0.1cm 0.2cm 0;
  color: #fff;
  text-align: center;
}

.etqf-logo { max-height: 1.5cm; max-width: 85%; object-fit: contain; }

/* Sem logo cadastrado a marca ainda precisa aparecer: sai o nome da empresa no
   lugar, e nao um espaco vazio no alto da etiqueta. */
.etqf-nome {
  font-size: 17pt;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.etqf-chamada {
  font-size: 8pt;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.etqf-contato {
  font-size: 7.5pt;
  font-weight: 600;
  line-height: 1.15;
  opacity: .92;
}

.etqf-campos {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.22cm;
  min-height: 0;
}

/* As duas caixas do mesmo tamanho, como no modelo de papelaria. O material tem
   um respiro a mais porque e o que se le de longe, mas nao o dobro: caixa de
   cliente espremida faz nome comprido virar reticencia, e ai a etiqueta deixa
   de responder "de quem e isto". */
.etqf-campo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 0.25cm;
  padding: 0.16cm 0.3cm;
  background: #fff;
  border-radius: 0.12cm;
  min-height: 0;
  overflow: hidden;
}
.etqf-campo          { flex: 1; }
.etqf-campo.material { flex: 1.35; }

/* O rotulo fica a ESQUERDA do valor, do jeito que a etiqueta original faz. Quem
   trabalha na bancada le esse formato de olho; mudar para rotulo em cima seria
   outra etiqueta com o mesmo conteudo. */
.etqf-rotulo {
  align-self: center;
  font-size: 7.5pt;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ficha-medio);
}

.etqf-valor {
  font-size: 15pt;
  font-weight: 700;
  line-height: 1.1;
  color: #111;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Razao social inteira nao cabe numa linha, e cortar com reticencia e o pior
   desfecho possivel: a etiqueta existe justamente para dizer de quem e o ferro.
   Entao ela quebra em duas linhas e diminui o corpo — cabe por inteiro. */
.etqf-valor.cliente {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
}
.etqf-valor.cliente.longo { font-size: 12pt; line-height: 1.15; }
.etqf-valor.cliente.muito-longo { font-size: 10pt; line-height: 1.15; }

.etqf-valor.forte {
  display: flex;
  align-items: baseline;
  gap: 0.25cm;
  white-space: normal;
}
/* O nome do material se ajusta ao proprio comprimento. "P7" e "VIGA BALDRAME 1"
   sao os dois extremos reais, e um corpo unico faria o curto parecer perdido na
   caixa ou o longo estourar para fora dela. */
.etqf-valor.forte b { font-size: 34pt; font-weight: 800; line-height: 1; }
.etqf-valor.forte.nome-medio b { font-size: 26pt; }
.etqf-valor.forte.nome-longo b { font-size: 17pt; }

/* A medida e a DO ESTRIBO, nunca a da peca acabada — vale aqui igual ao modelo
   antigo. Sai ao lado do nome, em corpo menor e na cor da marca. */
.etqf-valor.forte i {
  font-style: normal;
  font-size: 14pt;
  font-weight: 700;
  color: var(--ficha-medio);
}

/* Obra e quantidade entram na segunda linha da coluna do valor, alinhadas com
   ele. Ficavam soltas no canto de cima e brigavam com o nome do cliente. */
.etqf-obra,
.etqf-endereco,
.etqf-un {
  grid-column: 2;
  font-size: 8pt;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ficha-medio);
  overflow: hidden;
}
.etqf-un { font-weight: 700; white-space: nowrap; }

/* Endereco NAO leva reticencia. Numero da casa cortado e pior do que endereco
   nenhum: manda o motorista para a rua certa e o portao errado. Quebra em duas
   linhas; se nem assim couber, e sinal de que o cadastro tem endereco demais
   para uma etiqueta e a rota resolve isso melhor. */
.etqf-endereco {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #333;
  font-weight: 500;
}

/* A referencia da obra pode encurtar: ela se repete no cartao e na ficha. */
.etqf-obra { white-space: nowrap; text-overflow: ellipsis; }

/* O campo do cliente ganhou uma terceira linha e precisa de mais altura que o
   material, que tem so o nome. */
.etiqueta.faixa .etqf-campo { flex: 1.25; }
.etiqueta.faixa .etqf-campo.material { flex: 1; }

/* Com desenhos, as pecas entram dentro da caixa do material e o nome recua. */
.etiqueta.faixa .etqf-campo.material .etq-pecas { margin-top: 0.12cm; }
.folha-etiquetas.faixa.com-desenho .etqf-valor.forte b { font-size: 19pt; }


/* O nome da empresa no lugar do logo, para quem ainda nao subiu um. Mesmo lugar,
   mesma altura: a ficha nao muda de forma por causa disso. */
.nome-ficha {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #fff;
}

/* ==========================================================================
   Pedido simples — quilos por bitola
   ==========================================================================
   Todas as bitolas na tela ao mesmo tempo, em grade. Quem digita esta com o
   cliente no telefone: ler a lista e ir preenchendo e mais rapido do que
   escolher a bitola num menu antes de cada numero. */

.painel-peca.largo { max-width: 720px; }

/* ==========================================================================
   PEDIDO SIMPLES — a janela de lançar e a lista
   ==========================================================================
   A janela e uma gaveta: ela tem a altura da tela e uma largura so. Tudo aqui
   e desenhado para essa largura — e a lista que mora dentro dela tambem. */

/* A gaveta do pedido simples e mais larga que as outras: ela carrega DUAS
   coisas, o formulario e a relacao dos pedidos que ja existem. Com os 720px das
   demais, a tabela da relacao saia com os botoes fora da borda. */
/* ---------- a tela do pedido simples ----------

   Era uma gaveta carregando duas coisas: o formulario e a relacao. As duas
   disputavam a mesma largura, e conferir "esse cliente ja tem pedido aberto?"
   exigia rolar ate o fim e voltar para digitar.

   Virou tela: a relacao a esquerda, por onde se procura, e o pedido aberto a
   direita, onde se digita. A relacao e mais estreita porque tem cinco colunas
   curtas; o formulario e mais largo porque tem a grade das onze bitolas. */
/* ----------------------------------------------------------------------------
   O PEDIDO SIMPLES — a ficha na frente, a relação só quando se procura.

   A relação morava numa coluna fixa ao lado, ocupando um terço da tela o tempo
   todo para uma coisa que se faz de vez em quando: achar um pedido para
   corrigir. Quem entra aqui entra para LANÇAR, e é a ficha que tem que estar na
   frente.
   -------------------------------------------------------------------------- */
.ps-tela { max-width: 1120px; margin: 0 auto; }

.ps-procura { display: flex; gap: 8px; margin-bottom: 14px; }
.ps-procura .campo-busca { flex: 1; min-width: 0; }
.ps-procura .botao-claro { flex: none; }

.ps-achados { margin-bottom: 16px; }
.ps-achados tr.em-edicao td { background: var(--acento-veu); }

/* As colunas da relação achada. */
.tabela-pedidos col.tp-numero   { width: 104px; }
.tabela-pedidos col.tp-cliente  { width: 23%; }
.tabela-pedidos col.tp-material { width: 23%; }
.tabela-pedidos col.tp-peso     { width: 96px; }
.tabela-pedidos col.tp-entrega  { width: 100px; }
/* Medido: "NA PRODUÇÃO" pede 132px com o selo, e os dois botoes pedem 158. */
.tabela-pedidos col.tp-situacao { width: 132px; }
.tabela-pedidos col.tp-acoes    { width: 158px; }
.tabela-pedidos .acoes-linha { padding: 4px 6px; }
.tabela-pedidos .acoes-linha .botao-mini { padding: 2px 8px; font-size: 10.5px; }

/* ---------- a ficha de cadastro, riscada ---------- */

.ps-ficha {
  margin-bottom: 14px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
}
.ps-ficha-topo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--borda);
  background: var(--g-alto-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--g-fraco);
}
.ps-ficha-topo b {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--g-texto);
}
.ps-ficha-topo .ps-selo-modo { margin-left: auto; }

/* Rótulo à esquerda, campo à direita, risco entre tudo — o mesmo desenho das
   entregas e da mão de obra. */
.ps-grade { display: grid; grid-template-columns: 116px 1fr 116px 1fr; }

.ps-rot {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-right: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  background: var(--g-alto);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--g-fraco);
}
.ps-campo { border-bottom: 1px solid var(--borda); border-right: 1px solid var(--borda); }
.ps-campo.larga { grid-column: span 3; border-right: 0; }

/* A marca de "este pedido e do cliente cadastrado". Fica dentro da celula, na
   ponta direita: e resposta, nao campo — e por isso nao tem moldura nem rotulo. */
.ps-campo { position: relative; }
.ps-doCadastro {
  position: absolute;
  top: 50%; right: 10px;
  transform: translateY(-50%);
  padding: 1px 7px;
  border: 1px solid var(--acento);
  border-radius: 999px;
  background: var(--g-base);
  color: var(--acento);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  pointer-events: none;
}
/* O campo encolhe para nao passar por baixo da marca. */
.ps-campo:has(.ps-doCadastro) input { padding-right: 96px; }
.ps-campo:last-child { border-right: 0; }

/* O campo não tem moldura própria: a célula da tabela já é a moldura. O
   "!important" é pela mesma razão do campo da bitola — a pele industrial veste
   todo input da tela com um seletor de quatro classes. */
.ps-campo input,
.ps-campo select {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  color: var(--g-texto);
  font: inherit;
  font-size: 13px;
}
.ps-campo input:focus,
.ps-campo select:focus { outline: 2px solid var(--acento); outline-offset: -2px; }

/* A última fileira não leva risco embaixo: a borda do quadro já fecha. */
.ps-grade > :nth-last-child(-n+2) { border-bottom: 0; }

/* ---------- a tabela das bitolas ---------- */

/* Onze fichas soltas viraram DUAS FILEIRAS de seis células. Seis por fileira,
   e não doze: em doze cada célula fica com 55px e "1.870" não cabe sem apertar. */
.ps-bitolas { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ps-bitolas th, .ps-bitolas td { border: 1px solid var(--borda); text-align: center; }
.ps-bitolas th {
  padding: 4px 2px;
  background: var(--g-alto);
  font-size: 10px;
  font-weight: 700;
  color: var(--g-fraco);
  font-variant-numeric: tabular-nums;
}
.ps-bitolas td { padding: 0; }
.ps-bitolas input {
  width: 100%;
  height: 36px;
  padding: 0 6px;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  color: var(--g-texto);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ps-bitolas input:focus { outline: 2px solid var(--acento); outline-offset: -2px; }

/* A bitola preenchida ACENDE: achar as três que têm quilo no meio das onze é a
   conferência que se faz antes de fechar o pedido. */
.ps-bitolas td.tem { background: var(--acento-veu); }
.ps-bitolas td.tem input { color: var(--acento); }

/* As setinhas de subir e descer número roubam meia célula e ninguém pede 1 kg
   de cada vez num pedido de 600. */
.ps-bitolas input::-webkit-outer-spin-button,
.ps-bitolas input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ps-bitolas input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.ps-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: -14px 0 14px;
  padding: 8px 12px;
  border: 1px solid var(--borda);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: var(--g-alto);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--g-fraco);
}
.ps-total i { font-style: normal; text-transform: none; letter-spacing: 0; }
.ps-total b { font-size: 19px; color: var(--g-texto); letter-spacing: 0; }

.ps-form { display: block; }
.ps-relacao .lista-simples { margin-top: 0; max-height: none; }

/*
  A RELACAO DE PEDIDOS: LINHAS, e nao tabela.

  A tabela de cinco colunas vivia numa coluna de 360px, e ali largura e uma
  conta so: o que uma coluna ganha, outra perde. O resultado media-se na tela —
  "01/10/2026" partido em "01/10/202" e "6", o nome do cliente em tres andares,
  o peso colado na situacao.

  Em linha cada pedaco pede o que precisa: o nome fica com a sobra, os numeros
  nunca quebram, e os botoes descem inteiros para a linha de baixo quando a
  largura aperta.
*/
.ls-todos {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 11.5px;
  color: var(--g-fraco, var(--tinta-fraca));
  cursor: pointer;
}
.ls-todos input { margin: 0; cursor: pointer; }

.ls-lista { margin: 0; padding: 0; list-style: none; }

.ls-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-bottom-color: var(--borda);
}
.ls-item:hover { background: var(--g-alto-2); }
.ls-item.ls-marcado { border-color: var(--acento); background: var(--acento-veu); border-radius: 8px; }
.ls-item.em-edicao  { border-color: var(--acento); border-radius: 8px; }

.ls-item .ls-caixa { flex: none; width: 16px; margin: 0; cursor: pointer; }

/* O nome fica com a sobra da linha, e "min-width: 0" e o que permite ele
   encolher: sem isso um nome comprido empurra os numeros para fora. */
.ls-quem { flex: 1 1 140px; min-width: 0; }
.ls-cliente { display: block; font-size: 13px; line-height: 1.25; }
.ls-detalhe {
  display: block;
  font-size: 11px;
  color: var(--g-fraco, var(--tinta-fraca));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Numero nao quebra NUNCA: era isso que partia a data no meio. */
.ls-quanto {
  flex: none;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ls-quanto b { font-size: 13.5px; }
.ls-quanto b i { font-style: normal; font-size: 10px; font-weight: 600; opacity: .65; }
.ls-quanto small { display: block; font-size: 10.5px; color: var(--g-fraco, var(--tinta-fraca)); }
.ls-quanto .selo { margin-left: 4px; }

.ls-acoes { flex: none; display: flex; gap: 4px; margin-left: auto; }

/* AS OUTRAS OBRAS DO CLIENTE, logo abaixo do endereco da obra.

   Era uma secao propria, com titulo, explicacao, tabela de cinco colunas e
   quatro campos vazios — meia tela em TODO cadastro para uma coisa que so a
   minoria dos clientes tem. Agora e uma linha: as obras ja cadastradas e um
   botao. Os campos so existem depois do clique. */
.enderecos-cadastro { margin-top: 2px; }

.lista-enderecos { margin: 0 0 10px; padding: 0; list-style: none; }
.lista-enderecos li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--borda);
  border-radius: 7px;
  font-size: 12.5px;
}
.lista-enderecos li + li { margin-top: 6px; }
.lista-enderecos li b { flex: none; }
.lista-enderecos li span { flex: 1; color: var(--g-fraco, var(--tinta-fraca)); }

/* Os campos abertos ficam numa caixa: sem ela, quatro campos soltos no meio do
   cadastro pareciam parte do endereco da obra, logo acima. */
.endereco-novo {
  margin-bottom: 10px;
  padding: 12px;
  /* Tracejado NA COR DE DESTAQUE: medido na tela, o tracejado cinza sumia
     contra o painel e os quatro campos pareciam fazer parte do endereco da
     obra, logo acima — que e justamente a confusao que a caixa evita. */
  border: 1px dashed var(--acento);
  border-radius: 8px;
  background: var(--acento-veu, transparent);
}

/* O botao de acrescentar alinha com a base dos campos, e nao com o topo: ele e
   o fim da linha de digitacao, nao um titulo. */
.end-acao { display: flex; align-items: flex-end; gap: 6px; }
.end-acao .botao-claro { flex: 1; }

/* ---------- mão de obra: a capa de cada equipe ---------- */

/* Mesma gramatica da capa do cliente: inicial colorida, nome grande, numeros na
   direita. Esta tela era uma tabela cinza no meio do sistema. */
.eq-bloco { border-left: 3px solid hsl(var(--matiz, 210) 55% 55% / .55); }
.eq-capa {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.eq-nome { min-width: 0; flex: 1 1 auto; }
.eq-nome h2 { margin: 0; font-size: 18px; }
.eq-numeros { display: flex; gap: 22px; text-align: right; flex: none; }
.eq-numeros b {
  display: block;
  font-size: 20px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--g-texto);
}
.eq-numeros small { font-size: 11px; color: var(--g-fraco); }

/* Empreita ou gente da casa. Discreto, do tamanho de um selo: e uma qualidade
   do nome, nao uma informacao a parte. */
.eq-tipo {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--g-alto);
  color: var(--g-fraco);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: lowercase;
  vertical-align: middle;
}
.eq-tipo.propria { background: var(--acento-veu); color: var(--acento); }

/* Quem esta fazendo, no cartao do quadro. Discreto e ao lado do cliente: e
   resposta de "com quem esta isso?", nao o assunto do cartao. A cor vem do nome
   da equipe — a mesma conta que pinta a inicial do cliente. */
.ck-mao {
  display: inline-block;
  margin: 2px 0 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: hsl(var(--matiz-equipe, 210) 40% 30%);
  color: hsl(var(--matiz-equipe, 210) 75% 88%);
  font-size: 10.5px;
  font-weight: 700;
}

/* A TARJA DA EQUIPE, no alto do cartao. E o que permite varrer a coluna com o
   olho procurando uma turma so — o selo, sozinho, some no meio do texto.

   So aparece quando ha equipe: cartao sem turma fica como sempre foi. */
.cartao-kanban.com-equipe {
  position: relative;
  overflow: hidden;
}
.cartao-kanban.com-equipe::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: hsl(var(--matiz-equipe, 210) 55% 52%);
}
.cartao-kanban.com-equipe { padding-top: 13px; }

/* ---------- os filtros do levantamento ----------

   Tres linhas, cada uma com o rotulo na esquerda: equipe, periodo e procurar.
   Eram os quatro campos numa fila so, e a caixa da equipe — a primeira pergunta
   de toda sexta-feira — tinha o mesmo tamanho da busca, que e a ultima. */
.filtros-mao { padding: 14px 18px; }
.fm-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  flex-wrap: wrap;
}
.fm-linha + .fm-linha { border-top: 1px solid var(--g-risco, var(--linha)); }

.fm-rotulo {
  flex: none;
  width: 78px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--g-fraco);
}

.fm-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* O chip: alvo grande, estado visivel de longe. A equipe escolhida acende com a
   cor de acento — numa tela de fim de semana, saber EM QUAL turma se esta
   olhando vale mais do que economizar um centimetro. */
.fm-chip {
  padding: 5px 13px;
  border: 1px solid var(--g-risco-2, var(--borda));
  border-radius: 999px;
  background: transparent;
  color: var(--g-medio, var(--g-texto));
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.fm-chip:hover { border-color: var(--acento); color: var(--acento); }
.fm-chip.ativo {
  border-color: var(--acento);
  background: var(--acento-veu);
  color: var(--acento);
}
/* Equipe fora da lista continua filtrável — o trabalho dela não sumiu —, mas
   apagada: ela não está mais recebendo serviço. */
.fm-chip.fora { opacity: .55; font-style: italic; }

.fm-datas { display: flex; gap: 10px; margin-left: auto; align-items: center; }
.fm-datas label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--g-fraco);
}
.fm-datas input { width: 150px; }

.fm-busca { flex: 1 1 260px; min-width: 200px; }

/* O selo do cartao unificado. Discreto e logo abaixo do nome do cliente: ele
   explica por que aquele cartao pesa mais do que qualquer pedido sozinho. */
.ck-juntos {
  display: inline-block;
  margin: 2px 0 4px;
  padding: 1px 7px;
  border: 1px solid var(--acento);
  border-radius: 999px;
  color: var(--acento);
  font-size: 10.5px;
  font-weight: 700;
}


/* A barra dos marcados. So existe quando ha alguem marcado, entao ela pode ser
   grande: quando aparece, ela E o assunto. */
.ls-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border: 1px solid var(--acento);
  border-radius: var(--r1, 8px);
  background: var(--acento-veu);
  font-size: 12.5px;
}
.ls-barra b { font-size: 15px; }
.ls-barra .botao { margin-left: auto; }

/* O material embaixo do cliente, na lista do painel de varios pedidos. */
.tabela-envio small.bloco { display: block; }

.ps-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.ps-topo h2 { margin: 0; }
.ps-topo .dica { margin: 4px 0 0; max-width: 52ch; }

/* Diz em qual dos dois modos a janela esta. So aparece na correcao: "novo" ja
   esta escrito no titulo, e um selo dizendo "criando" seria repetir. */
.ps-selo-modo {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--acento);
  border-radius: 999px;
  color: var(--acento);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   OS TRES QUADROS DO PEDIDO SIMPLES.

   Eram quinze campos numa folha corrida, com tres titulos de letra pequena e do
   mesmo tom do resto. Nada dizia onde um assunto acabava e o outro comecava —
   a tela parecia um bloco so, e quem chega para lancar um pedido nao sabe por
   onde comecar a ler.

   Cada pergunta virou um quadro: moldura, faixa de titulo com fundo proprio,
   numero e uma linha dizendo o que entra ali. O numero e o que mais ajuda —
   ele diz que sao TRES coisas e que elas tem ordem.
   -------------------------------------------------------------------------- */
.ps-bloco {
  margin-bottom: 14px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
}

.ps-bloco-topo {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--borda);
  /* A faixa e o que separa de verdade: so a moldura, os tres quadros ficavam
     parecidos demais com os campos que tem dentro. */
  background: var(--g-alto-2, #f3f6f9);
}
.ps-bloco-topo h3 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.ps-bloco-topo small {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--g-fraco, var(--tinta-fraca));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O numero do passo. Redondo e na cor de destaque: e a unica coisa colorida do
   cabecalho, e por isso e o primeiro ponto onde o olho pousa. */
.ps-passo {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  align-self: center;
}

.ps-bloco-corpo { padding: 13px; }
/* Dentro do quadro, o primeiro titulo de grade nao precisa do respiro de cima:
   a faixa ja separou. */
.ps-bloco-corpo > .rotulo-grade:first-child,
.ps-bloco-corpo > .titulo-campo:first-child { margin-top: 0; }

/*
  A FILEIRA DE BOTOES FICA GRUDADA NO PE.

  O formulario tem quinze campos e onze fichas de bitola: numa tela de
  computador o "Criar e mandar para a produção" ficava abaixo da dobra, e quem
  terminava de digitar rolava para procurar o botao. Grudado embaixo, ele esta
  sempre a vista — e a faixa opaca impede que os campos passem por baixo dele e
  virem sujeira.
*/
.ps-acoes {
  position: sticky;
  bottom: 0;
  margin: 0 -2px;
  padding: 12px 2px;
  background: var(--g-base, #fff);
  border-top: 1px solid var(--borda);
}

/* O titulo de cada bloco de campos. Substitui tres "style=" soltos no HTML —
   que eram iguais entre si e ja tinham comecado a divergir. */
.titulo-campo {
  margin: 22px 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--g-fraco, var(--tinta-fraca));
}
.titulo-campo:first-of-type { margin-top: 18px; }

/* Duas colunas em vez de tres. Com nove campos de larguras diferentes, a grade
   de tres deixava buraco no fim de tres linhas; em duas, toda linha fecha. */
.grade-campos.duas { grid-template-columns: repeat(2, 1fr); }
.grade-campos.duas .col-2,
.grade-campos.duas .col-3 { grid-column: span 2; }

/* Em tablet de pe e em celular a gaveta tem a largura da tela: duas colunas ali
   dao 150px por campo, e "São José do Rio Preto" nao cabe em nenhum deles. Uma
   coluna so, e a rolagem faz o resto. */
@media (max-width: 760px) {
  .grade-campos.duas { grid-template-columns: 1fr; }
  .grade-campos.duas .col-2,
  .grade-campos.duas .col-3 { grid-column: auto; }
}

/* ---------- as fichas de bitola ---------- */

/* O rotulo da grade, no tamanho dos rotulos de campo: ela E um campo, so que
   com onze caixas. Sem ele a grade aparecia colada no "Material", como se
   fossem a mesma pergunta. */
.rotulo-grade {
  display: block;
  margin: 16px 0 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--g-fraco, var(--tinta-fraca));
}

/* O rotulo da grade e o total na mesma linha: os dois numeros que mudam a cada
   tecla ficam onde o olho ja esta. */
.linha-grade {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.linha-grade .rotulo-grade { margin-bottom: 7px; }
.total-linha {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.total-linha i {
  font-style: normal;
  font-size: 11px;
  color: var(--g-fraco, var(--tinta-fraca));
}
.total-linha b { font-size: 16px; font-weight: 800; }

/* UMA LINHA POR BITOLA, e nao um cartao de duas.

   Eram onze cartoes de 58px de altura, quase todos mostrando zero: a coisa mais
   pesada da tela para a informacao menos frequente. Em linha, a tira das onze
   ocupa menos que o bloco do endereco — e a preenchida continua acendendo, que
   e o que se procura ali. */
/* As "fichas de bitola" (.grade-bitolas / .celula-bitola / .total-pedido) sairam
   junto com o formulario antigo do pedido simples: hoje as bitolas sao uma
   tabela riscada — ver ".ps-bitolas", mais acima. */

/* A lista do que vai para a bancada, no painel de envio do pedido simples.
   Estreita de propósito: são duas colunas — a bitola e o quanto —, e é lida de
   cima a baixo para conferir contra o pedido antes de soltar. */
.tabela-envio { margin-top: 6px; }
.tabela-envio td { padding: 5px 8px; }
.tabela-envio td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-envio td.num small { color: var(--g-fraco); font-size: 10.5px; }
.tabela-envio tfoot td {
  border-top: 1px solid var(--g-risco, var(--linha));
  font-weight: 700;
}
.tabela-envio tfoot td:first-child { font-weight: 400; color: var(--g-fraco); }

/* ---------- a relação, dentro da mesma janela ---------- */

.ls-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ls-topo h2 { margin: 0; }
.ls-topo small { color: var(--g-fraco, var(--tinta-fraca)); font-size: 11.5px; }

/* Duas informações por célula, uma em cima da outra: o número do pedido sobre o
   nome, e a data sobre a situação. É o que permitiu cair de oito colunas para
   cinco sem perder nada. */
.tabela-simples td { vertical-align: top; }
.tabela-simples .ls-num,
.tabela-simples .ls-data {
  display: block;
  font-size: 10.5px;
  color: var(--g-fraco, var(--tinta-fraca));
}
.tabela-simples .ls-cliente { display: block; font-size: 13px; line-height: 1.25; }
.tabela-simples .ls-material { font-size: 12.5px; }
.tabela-simples .ls-material small { display: block; font-size: 10.5px; margin-top: 2px; }
.tabela-simples .ls-data { margin-bottom: 3px; }
.tabela-simples td.num { white-space: nowrap; }
.tabela-simples td.num b { font-size: 14px; font-variant-numeric: tabular-nums; }
.tabela-simples td.num small { font-size: 10.5px; color: var(--g-fraco, var(--tinta-fraca)); }

/* Entregue e assunto encerrado: continua na lista, para consulta, mas sem
   disputar atenção com o que ainda vai sair. */
.tabela-simples tr.ls-fechado td { opacity: .58; }

.tabela-simples .acoes-linha { white-space: nowrap; }

/* Na tela do pedido simples a relacao e a coluna estreita, e os tres botoes de
   cada linha somam 157px: sem alargar a coluna deles, a tabela rolava de lado e
   o "Excluir" so existia para quem soubesse que estava ali fora. A largura sai
   de "Material", que nessa coluna ja vem resumido. */
/* Medido, e nao estimado: "Editar", "Produção" e "Excluir" somam 186px, mais os
   24 de recheio da celula — 210 dos 574 da tabela, que sao 36%. Com 28% o
   "Excluir" saia cortado pela borda. */
.ps-relacao .tabela-simples col.c-quem   { width: 29%; }
.ps-relacao .tabela-simples col.c-peso   { width: 13%; }
.ps-relacao .tabela-simples col.c-quando { width: 17%; }
.ps-relacao .tabela-simples col.c-acoes  { width: 36%; }

/* O material desce para a linha do cliente quando a relacao e compacta. */
.ls-material-compacto {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  color: var(--g-fraco, var(--tinta-fraca));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* E a quebra fica LIBERADA nesta relacao, sempre.

   A largura de 36% foi medida com "Editar · Produção · Excluir", mas a linha em
   edicao troca o "Editar" por um selo mais largo — e ai o "Excluir" saia
   cortado de novo. Perseguir o pixel aqui e caro e frágil: qualquer rotulo novo
   recomeça a conta. Quebrando, a linha cresce 20px quando precisa e nunca
   esconde um botao. */
.ps-relacao .tabela-simples .acoes-linha { white-space: normal; }

/* "NA PRODUÇÃO" partido em duas linhas vira duas palavras soltas debaixo da
   data, e o olho le "produção" como se fosse outra coluna. O selo e uma
   etiqueta: ou cabe inteiro, ou a coluna cede largura. */
.tabela-simples .selo { white-space: nowrap; }



/* ==========================================================================
   Tinta calculada sobre a cor da empresa
   ==========================================================================
   O texto em cima da cor da marca era branco fixo. Servia enquanto todo mundo
   escolhia navy, vinho ou verde escuro; quem escolhesse branco, bege ou amarelo
   recebia a ficha com o cabecalho invisivel — branco sobre branco — e nada na
   tela avisava. Agora a tinta vem calculada pelo contraste. Ver
   aplicarCorDaEmpresa() no app.js. */

.nome-ficha { color: var(--ficha-tinta-escuro, #fff); }

/* O texto secundario do cabecalho — obra, local, numero, subtitulo — usava um
   azul-claro fixo, escolhido para brilhar sobre navy. Numa ficha de cor clara
   ele virava quase o proprio fundo: o titulo aparecia e o nome da obra nao.
   Agora e a mesma tinta do titulo, so que mais apagada — a hierarquia se
   mantem nos dois casos, porque vem de dentro da cor e nao de um tom fixo. */
.ficha-topo h2,
.ficha-topo .contexto {
  color: var(--ficha-tinta-escuro, #fff);
  opacity: .78;
}
.cartao-barra .descricao { color: var(--ficha-tinta, #fff); opacity: .8; }

.etiqueta.faixa .etqf-marca { color: var(--ficha-tinta, #fff); }

/* Aqui a cor da marca e o proprio TEXTO, dentro das caixas brancas da etiqueta.
   Nao ha fundo colorido para trocar de tinta: a cor e que escurece ate dar para
   ler. Por isso "--ficha-legivel" e nao "--ficha-medio". */
.etqf-rotulo,
.etqf-obra,
.etqf-un,
.etqf-valor.forte i { color: var(--ficha-legivel, var(--ficha-medio)); }

.etq-cliente { color: var(--ficha-legivel, var(--ficha-escuro)); }
.etq-material b { color: var(--ficha-legivel, var(--ficha-escuro)); }
.etq-material span { color: var(--ficha-legivel, var(--ficha-medio)); }
.etq-un { background: var(--ficha-escuro); color: var(--ficha-tinta-escuro, #fff); }

/* As duas caixas da etiqueta sao brancas sobre a cor da marca — e desaparecem
   quando a marca TAMBEM e clara: o cartao vira uma folha lisa e some a divisao
   entre "cliente" e "material", que e o que a pessoa procura de longe.

   O contorno e preto translucido, e nao a cor da empresa: sobre marca escura ele
   praticamente nao aparece (a caixa branca ja se destaca sozinha), e sobre marca
   clara ele desenha a borda que faltava. Um valor so resolve os dois casos. */
.etiqueta.faixa .etqf-campo { border: 1px solid rgba(0, 0, 0, .16); }

/* As duas acoes da parada: entregue e tirar da rota. Empilhadas no canto, para
   o "Entregue" nao competir com o x — sao coisas opostas e ficavam lado a lado. */
/* ----------------------------------------------------------------------------
   A PARADA DO MOTORISTA, EM QUADRO RISCADO.

   O cartão de texto corrido virou tabela: rótulo à esquerda, valor à direita,
   linha horizontal entre as fileiras e vertical entre as duas colunas. Cada
   informação tem lugar fixo — na terceira parada o olho já sabe onde está o
   peso sem ler o resto.
   -------------------------------------------------------------------------- */
.cartao-entrega.quadro-parada {
  display: block;
  padding: 0;
  overflow: hidden;   /* as bordas de dentro param na curva do quadro */
}

/*
  O "small" VOLTA A SER INLINE aqui dentro.

  Mais acima no arquivo, ".cartao-entrega small" e BLOCO — ele veste o material
  do cartao da fila, que precisa de linha propria. O quadro da parada herda a
  mesma classe (e por isso continua sendo arrastavel pelo mesmo codigo), e o
  "kg" do peso caia para a linha de baixo: "2.400" em cima, "kg" embaixo, com a
  fileira do pedido ocupando dois andares.

  Medido na tela — o elemento do peso tinha 36px de altura para um texto de 18.
*/
.quadro-parada small {
  display: inline;
  margin: 0;
  line-height: inherit;
}

/* O ENDEREÇO NA FRENTE, em corpo maior: é o que o motorista procura. Duas
   linhas no máximo; o resto fica no "title". */
.pd-cabeca {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--borda);
  background: var(--g-alto-2);
}
.pd-endereco {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pd-endereco.falta { color: var(--alerta); font-weight: 600; }
.pd-endereco .bairro { color: var(--g-texto); font-weight: 700; }
.pd-endereco .cidade { font-style: normal; color: var(--g-fraco); }

.pd-grade { display: grid; grid-template-columns: 62px 1fr; }

.pd-rotulo {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-right: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--g-fraco);
}
.pd-valor {
  min-width: 0;
  padding: 4px 9px;
  border-bottom: 1px solid var(--borda);
  font-size: 12.5px;
  line-height: 1.3;
}

/* UMA LINHA SÓ para o nome. Passou da largura, corta com reticências: nome em
   três andares desalinha a tabela inteira e não ajuda a achar a entrega. */
.pd-nome {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O número à esquerda, o peso encostado à direita — a coluna dos quilos fica
   alinhada de uma parada para a outra. */
.pd-pedido {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
/* O peso NAO QUEBRA: sem isto o "kg" descia sozinho para a linha de baixo e a
   fileira do pedido ficava com dois andares. */
.pd-kg {
  flex: none;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.pd-kg small { font-size: 9.5px; font-weight: 600; opacity: .6; }

.pd-material {
  color: var(--g-medio, var(--g-fraco));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-acoes { padding: 5px 7px; }

/*
  OS BOTOES DA PARADA DESCEM PARA A LINHA DE BAIXO.

  Eram uma COLUNA a direita do cartao: "Entregue" e o "×" empilhados comiam 80px
  de largura fixa num cartao de 276px — quase um terco da linha, para dois
  botoes que se usam uma vez por entrega. O que sobrava era o texto: nome em tres
  andares, endereco em quatro.

  Numa fileira embaixo eles nao custam largura nenhuma, e o cartao inteiro passa
  a ser do nome, do peso e do endereco — que e o que o motorista le.
*/
.cartao-entrega.na-rota { flex-wrap: wrap; }

/* Vale para o quadro inteiro — fila e rota —, e nao so para a parada: as duas
   colunas mostram a mesma carga e tem que se ler do mesmo jeito. */
.quadro-parada .ce-acoes,
.cartao-entrega.na-rota .ce-acoes {
  flex: 0 0 100%;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
/* O "mandar para…" e o primeiro da fileira e fica com a sobra: os dois botoes
   tem largura conhecida, o nome do motorista nao. */
.quadro-parada .ce-acoes .ce-mandar,
.cartao-entrega.na-rota .ce-acoes .ce-mandar { flex: 1; min-width: 0; margin-right: auto; }

/* O selo de "Retira" abre a fileira, antes do seletor. */
.quadro-parada .ce-acoes .ce-retira { flex: none; order: -1; }

.ce-acoes { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.ce-acoes .botao-mini { padding: 2px 8px; font-size: 11px; }

/* Elemento sem peça: o pedido simples. Só o quilo a separar, no lugar da tabela. */
.so-quilo { margin: 0; padding: 14px; font-size: 13px; color: var(--texto-fraco); }
.so-quilo b { font-size: 20px; color: var(--texto); margin-right: 6px; }

/* A quantidade do elemento vira botão na barra: é o número que mais muda depois
   do levantamento pronto, e estava só escrito. */
.cartao-barra .unidades.editavel {
  border: 1px solid #ffffff4d;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  transition: background .12s, border-color .12s;
}
.cartao-barra .unidades.editavel:hover { background: #ffffff45; border-color: #ffffff99; }

@media print { .cartao-barra .unidades.editavel { border: 0; } }

/* O antes e o depois lado a lado. Mudar 50 B1 para 30 mexe no peso da obra
   inteira: quem digita tem que ver o tamanho da mudança antes de salvar. */
.antes-depois {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-top: var(--e3);
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--realce, #00000010);
}
.antes-depois > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.antes-depois span { font-size: 11px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .5px; }
.antes-depois b { font-size: 18px; font-weight: 800; }
.antes-depois small { font-size: 13px; color: var(--texto-fraco); }
.antes-depois .seta { flex: none; font-size: 20px; color: var(--texto-fraco); }
.antes-depois .mudou b, .antes-depois .mudou small { color: var(--acento); }

/* ==========================================================================
   Placas do painel — rótulo, número, variação
   ==========================================================================
   O rótulo sobe para o topo e o ícone vai para o canto: quem entra no painel
   procura UMA placa, e achar pelo símbolo é mais rápido do que ler quatro
   rótulos em maiúscula. */

.p-placa-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.p-placa-topo .p-placa-rot { margin: 0; }

.p-placa-icone {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--g-alto, #ffffff12);
  color: var(--texto-fraco);
}
.p-placa-icone svg { width: 16px; height: 16px; }

/* A variação vem depois do número, não antes: primeiro quanto, depois se subiu.
   Verde e vermelho sozinhos não bastam — quem não distingue as duas cores lê o
   sinal, que está lá. */
.p-placa-var {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.p-placa-var.sobe  { color: var(--ok, #2e7d5b); }
.p-placa-var.desce { color: var(--erro, #b3261e); }

.p-placa .p-placa-pe {
  margin-left: 6px;
  font-size: 11px;
  color: var(--texto-fraco);
}

.p-placa.forte .p-placa-icone { background: #ffffff1f; color: var(--acento-claro, #cfe2f5); }

/* O verde e o vermelho da variação são tons ESCUROS — feitos para papel branco.
   No tema escuro eles caíam para 3,5 e 2,6 de contraste sobre o fundo da placa,
   abaixo dos 4,5 da norma: a seta de subida quase sumia justamente na placa em
   destaque, que é a que a pessoa olha primeiro.

   Estes dois são os tons mais discretos que passam nos DOIS fundos da placa — o
   escuro comum e o azul do destaque. O tema claro segue com os originais. */
.p-placa-var.sobe  { color: #3fb87c; }
.p-placa-var.desce { color: #f08a83; }

:root[data-tema="claro"] .p-placa-var.sobe  { color: var(--ok); }
:root[data-tema="claro"] .p-placa-var.desce { color: var(--erro); }

/* Juntar etapas num cartão só, na janela de enviar para produção. */
.juntar-etapas { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.juntar-titulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.juntar-conta {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--realce, #00000010);
  font-size: 12.5px;
  color: var(--texto-fraco);
}
.juntar-conta b { color: var(--texto); }

/* ==========================================================================
   Etiqueta de CORTE E DOBRA — uma por posição
   ==========================================================================
   A do amarrado vai no feixe e diz de quem é. Esta fica na bancada e diz o que
   cortar: uma por N, com o desenho grande e os três números que a serra usa.

   O desenho aqui não ilustra: é a instrução. Quem dobra lê a cota nesta folha,
   e cota pequena é peça torta — por isso ele ocupa o meio inteiro.

   Fundo branco de propósito: é papel de trabalho, e faixa colorida em impressora
   térmica só gasta ribbon numa etiqueta que ninguém entrega a ninguém. */

.etiqueta.corte {
  background: #fff;
  color: #111;
  padding: 0.3cm 0.35cm;
  gap: 0.2cm;
}

.etqc-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.1cm;
  border-bottom: 1.5px solid var(--ficha-legivel, #103454);
}
.etqc-marca { font-size: 9pt; font-weight: 800; color: var(--ficha-legivel, #103454); }
.etqc-tipo {
  font-size: 6.5pt;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #555;
}

.etqc-quem { display: flex; align-items: baseline; justify-content: space-between; gap: 0.3cm; }
.etqc-pos { font-size: 24pt; font-weight: 800; line-height: 1; }
.etqc-peca {
  font-size: 12pt;
  font-weight: 700;
  color: var(--ficha-legivel, #103454);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* O desenho toma o espaço que sobra, e as cotas crescem com ele. */
.etqc-desenho { flex: 1; display: grid; place-items: center; min-height: 0; }
.etqc-desenho svg { width: 100%; height: auto; max-height: 100%; display: block; }
.etqc-desenho .desenho { margin: 0; width: 100%; }

.etqc-numeros {
  display: flex;
  justify-content: space-between;
  gap: 0.2cm;
  padding-top: 0.12cm;
  border-top: 1px solid #ddd;
}
.etqc-numeros span { display: flex; flex-direction: column; line-height: 1.05; }
.etqc-numeros b { font-size: 14pt; font-weight: 800; }
.etqc-numeros small { font-size: 6.5pt; color: #555; text-transform: uppercase; letter-spacing: .4px; }

/* ==========================================================================
   Faixa da atualização, no rodapé
   ==========================================================================
   Era uma tela inteira, e aparecia ANTES do login: quem chegava de manhã era
   recebido por uma atualização no lugar do sistema. Aqui ela espera. */

.faixa-atualizacao {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  padding: 10px 16px;
  border-top: 1px solid var(--borda, #2a2a2a);
  background: var(--g-alto, #1e1e1e);
  box-shadow: 0 -8px 24px #00000040;
}

.fa-corpo {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.fa-texto { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 2px; }
.fa-texto b { font-size: 13.5px; }
.fa-texto small { font-size: 11.5px; color: var(--texto-fraco); }

.fa-corpo.erro b { color: var(--erro-claro, #f08a83); }

/* A barra ocupa a linha toda embaixo do texto quando o download começa. */
.fa-barra {
  flex: 1 0 100%;
  height: 6px;
  margin-top: 2px;
  border-radius: 99px;
  background: var(--borda, #333);
  overflow: hidden;
}
.fa-barra > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--acento, #6ba4e0);
  transition: width .2s linear;
}

/* Sem tamanho declarado pelo servidor não há porcentagem — a barra anda para
   dizer que algo acontece, sem afirmar quanto falta. */
.fa-barra.indeterminada > span {
  width: 35%;
  animation: fa-vai 1.1s ease-in-out infinite;
}
@keyframes fa-vai {
  0%   { margin-left: -35%; }
  100% { margin-left: 100%; }
}

@media print { .faixa-atualizacao { display: none !important; } }

/* ==========================================================================
   Cartão do cliente
   ==========================================================================
   Era nome, cidade, telefone e "1 levantamento" — quatro linhas cinzas iguais
   em dez cartões iguais. A cor da marca vem do nome e não muda; o peso entra
   como o número grande, porque é ele que diz o tamanho do cliente. */

.cc-topo { display: flex; align-items: flex-start; gap: 11px; }

.cc-marca {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: hsl(var(--matiz) 62% 92%);
  color: hsl(var(--matiz) 58% 30%);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.cc-nome { flex: 1; min-width: 0; }

/* Duas linhas no maximo. "ANA CAROLINA FABIANO E OUTRO" ocupava tres e empurrava
   a fileira inteira para baixo. */
.cc-nome h3 {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-local {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--g-fraco);
}

.cc-contato {
  margin-top: 10px;
  font-size: 12px;
  color: var(--g-fraco);
  font-variant-numeric: tabular-nums;
}

/* O miolo cresce e empurra o rodape para o pe do cartao: e isto que alinha os
   pesos de uma fileira inteira, tenha o cartao selo ou nao. */
.cc-meio { flex: 1; }

.cartao-cliente .rodape {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;

  /*
    ALTURA MINIMA, e e ela que alinha a fileira.

    Os cartoes ja tinham a mesma altura, mas o rodape de cada um tinha a sua: em
    "2 levantamentos · 28/09/2026" o texto cabe numa linha, em outro cartao
    quebra em duas — e o peso, que e o numero que se le correndo o olho pela
    fileira, aparecia em tres alturas diferentes.

    Com o minimo fixo, o rodape comeca sempre na mesma linha. E quem precisar de
    duas linhas continua tendo: isto e um piso, nao um teto — nada e cortado.
  */
  min-height: 48px;   /* medido: e a altura do rodape mais cheio (peso + duas
                         linhas de contagem/data + etiqueta). */
}
.cc-kg {
  font-size: 17px;
  font-weight: 700;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.cc-kg small { font-size: 11px; font-weight: 600; color: var(--g-fraco); }

/* Cliente sem levantamento não é erro — é cadastro novo. Fica dito, sem alarme. */
.cc-kg.vazio { font-size: 12px; font-weight: 600; color: var(--g-fraco); }
.cartao-cliente.sem-obra .cc-marca { opacity: .55; }

/* A contagem em cima, a data embaixo: empilhadas elas cabem na altura que o
   rodape ja tem, e o peso de todos os cartoes da fileira fica na mesma linha. */
.cc-pe {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 10.5px;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--g-fraco);
}

/* No tema escuro a marca inverte: fundo fundo, letra clara. */
:root:not([data-tema="claro"]) .cc-marca {
  background: hsl(var(--matiz) 42% 22%);
  color: hsl(var(--matiz) 70% 78%);
}


/* ==========================================================================
   Cadastro do cliente — capa e lista de obras
   ==========================================================================
   A tela era: uma grade de cinco rotulos com meia tela em branco, uma folha
   inteira so para dizer "nenhum projeto anexado", e uma tabela de nove colunas
   que nao cabia — botao cortado fora da tela pela direita, nome de obra
   quebrando uma palavra por linha.

   Trocado por capa + linhas que dobram. */

/* ----------------------------------------------------------------------------
   A FICHA DO CLIENTE — o registro dele.

   Era uma folha corrida: capa com os dados do cadastro, pedidos, levantamentos
   — tudo no mesmo peso, e o que se vem fazer aqui (abrir uma obra) no fim da
   rolagem. Agora: cabeçalho de identidade, quatro números, abas, e uma coluna
   da direita para o que é consulta.
   -------------------------------------------------------------------------- */
.cd-ficha-tela { max-width: 1480px; }

.cd-cabeca {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cd-cabeca .cc-marca { width: 52px; height: 52px; border-radius: 14px; font-size: 21px; }
.cd-id { flex: 1; min-width: 220px; }
.cd-id h1 {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--g-texto);
}
.cd-selos {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 5px; font-size: 12.5px; color: var(--g-fraco);
}
.etiqueta-fina {
  padding: 2px 9px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  font-size: 11.5px;
}
.etiqueta-fina.viva { border-color: var(--acento); color: var(--acento); }

.cd-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* O recado do cadastro vira bilhete no alto, e não um parágrafo perdido no meio
   da capa: quando existe, é a primeira coisa que alguém precisa ler. */
.cd-recado {
  margin: 0 0 14px;
  padding: 9px 13px;
  border-left: 3px solid var(--acento);
  border-radius: 0 8px 8px 0;
  background: var(--acento-veu, var(--g-alto));
  font-size: 13px;
}

/* ---------- os quatro números ---------- */
.cd-numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 1000px) { .cd-numeros { grid-template-columns: repeat(2, 1fr); } }

.cd-num {
  padding: 13px 15px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--g-base);
}
.cd-num-rot { display: block; font-size: 11.5px; color: var(--g-fraco); }
.cd-num b {
  display: block;
  margin: 5px 0 2px;
  font-size: 25px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--g-texto);
  font-variant-numeric: tabular-nums;
}
.cd-num b i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--g-fraco); margin-left: 4px; }
.cd-num small { font-size: 11.5px; color: var(--g-fraco); }

/* ---------- abas ---------- */
.cd-abas { display: flex; gap: 2px; margin-bottom: 14px; border-bottom: 1px solid var(--borda); }
.cd-abas button {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--g-fraco);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.cd-abas button:hover { color: var(--g-texto); }
.cd-abas button.ativo { color: var(--g-texto); font-weight: 600; border-bottom-color: var(--acento); }
.aba-conta {
  margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; background: var(--g-alto-2);
  font-size: 11px; font-weight: 600; color: var(--g-fraco);
}
.cd-abas button.ativo .aba-conta { background: var(--acento-veu); color: var(--acento); }

/* ---------- as duas colunas ---------- */
.cd-duas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .cd-duas { grid-template-columns: 1fr; } }

.cd-principal { padding: 0; overflow: hidden; }
.cd-principal .vazio-interno { padding: 26px 18px; }
.cd-lado { display: grid; gap: 14px; }
.cd-lado .folha { margin: 0; }

/* O cadastro, riscado e compacto — é consulta, não assunto. */
.cd-dados { display: grid; grid-template-columns: 94px 1fr; margin: 0 -18px -18px; }
.cd-dados > span {
  padding: 7px 12px;
  border-top: 1px solid var(--borda);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.cd-dados > span:nth-child(odd) {
  border-right: 1px solid var(--borda);
  background: var(--g-alto);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--g-fraco);
  display: flex;
  align-items: center;
}

.cd-anexos { list-style: none; margin: 0; padding: 0; }
.cd-anexos li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.cd-anexos .meta { margin-left: auto; font-size: 11px; color: var(--g-fraco); }

.cd-entregas { list-style: none; margin: 0; padding: 0; }
.cd-entregas li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 12.5px;
  border-bottom: 1px solid var(--borda);
}
.cd-entregas li:last-child { border-bottom: 0; }
.ce-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--acento); flex: none; }
.cd-ent-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-ent-kg { flex: none; font-size: 11.5px; color: var(--g-fraco); font-variant-numeric: tabular-nums; }

/* ---------- as tabelas das abas ---------- */
/*
  A COLUNA DO NOME FICA SEM LARGURA, de proposito.

  Com "table-layout: fixed", a coluna sem width recebe o que sobrar — entao as
  outras tem a largura que precisam e o nome da obra fica com o resto, em
  qualquer tela. Com porcentagem, a soma passava da largura util e o navegador
  espremia TODAS proporcionalmente: o "Excluir" virava reticencias sem ninguem
  entender por que.

  152px na situacao e o que "5 na produção" com o selo em volta pede; 200 nas
  acoes e o que os tres botoes pedem.
*/
.tabela-obras col.to-etapas   { width: 70px; }
.tabela-obras col.to-entregue { width: 178px; }
.tabela-obras col.to-situacao { width: 152px; }
.tabela-obras col.to-acoes    { width: 200px; }

/* A barra do que já foi entregue. Ela é a própria conta: cheia quer dizer
   que todo o aço daquela obra já saiu. */
.barra-entrega {
  display: block;
  height: 5px;
  margin-bottom: 3px;
  border-radius: 1px;
  background: var(--g-alto-2);
  overflow: hidden;
}
.barra-entrega i { display: block; height: 100%; background: var(--ok); }

/* "3.180 de 8.420 kg · 38%" — o quanto e o de quanto na mesma linha. */
.entrega-conta { font-size: 11.5px; color: var(--g-fraco); white-space: nowrap; }
.entrega-conta b { color: var(--g-texto); font-weight: 600; }
.entrega-conta i { font-style: normal; color: var(--ok); font-weight: 600; margin-left: 3px; }

/* Obra terminada: a linha inteira baixa o tom. O que está pronto não disputa
   atenção com o que ainda falta. */
.tabela-obras tr.obra-finalizada td { background: var(--g-alto); }
.tabela-obras tr.obra-finalizada td b { color: var(--g-medio); }
.selo.ok.forte {
  background: var(--ok);
  color: #05230f;
  font-weight: 700;
  border-color: transparent;
}
.tabela-obras td small { display: block; font-size: 11.5px; color: var(--g-fraco); }
.tabela-obras .acoes-linha { padding: 4px 6px; }
.tabela-obras .acoes-linha .botao-mini { padding: 2px 8px; font-size: 10.5px; }

.tabela-simples-cliente col.tsc-pedido   { width: 110px; }
.tabela-simples-cliente col.tsc-dia      { width: 104px; }
.tabela-simples-cliente col.tsc-peso     { width: 100px; }
.tabela-simples-cliente col.tsc-bitolas  { width: 30%; }
.tabela-simples-cliente col.tsc-situacao { width: 118px; }
.tabela-simples-cliente col.tsc-acoes    { width: 104px; }
.tabela-simples-cliente .acoes-linha { padding: 4px 6px; }

.tabela-entregas-cliente col.tc-oque   { width: 50%; }
.tabela-entregas-cliente col.tc-pedido { width: 120px; }
.tabela-entregas-cliente col.tc-peso   { width: 110px; }
.tabela-entregas-cliente col.tc-dia    { width: 120px; }

/* ---------- as obras ---------- */

.lista-obras { display: flex; flex-direction: column; gap: 8px; }

.obra-linha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 14px;
  border: 1px solid var(--linha);
  border-left: 3px solid transparent;
  border-radius: 11px;
  transition: border-color .12s, background .12s;
}
.obra-linha:hover { background: var(--g-alto, #f7f9fb); border-color: var(--azul); }

/* A barra verde a esquerda e a unica coisa que separa obra parada de obra na
   bancada quando se corre o olho pela lista. */
.obra-linha.produzindo { border-left-color: var(--ok); }

.ob-id { flex: 1 1 220px; min-width: 0; }
.ob-id h3 { margin: 0; font-size: 14.5px; line-height: 1.3; }
.ob-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--g-fraco);
}
.ob-cod { font-variant-numeric: tabular-nums; }

.ob-numeros { display: flex; gap: 18px; flex: none; }
.ob-numeros span { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.ob-kg { min-width: 62px; }
.ob-etapas { min-width: 42px; }
.ob-kg { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ob-etapas { font-size: 16px; font-weight: 600; color: var(--g-fraco); font-variant-numeric: tabular-nums; }
.ob-numeros small {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--g-fraco);
}

.ob-situacao { flex: none; min-width: 108px; }
.selo.parado { background: var(--g-alto, #eef1f5); color: var(--g-medio, #5b6b7b); }

.ob-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

/* Aperta a tela: os numeros e os botoes descem, o nome da obra continua inteiro. */
@media (max-width: 760px) {
  .ob-acoes { margin-left: 0; width: 100%; }
  .cd-numeros { margin-left: 0; width: 100%; justify-content: space-between; }
}


/* ==========================================================================
   Painel — faixa de hoje, baldes e tiras
   ==========================================================================
   O painel era uma pilha: cada bloco tomava a largura inteira e empurrava o
   seguinte para baixo. A carteira sozinha ocupava uma faixa com meia tela vazia
   ao lado; as quatro caixas de prazo contavam os mesmos itens que a fila logo
   abaixo listava; e a fila — o bloco que justifica a tela existir — so comecava
   depois de duas rolagens.

   Agora a faixa de hoje manda, as tiras dao o tamanho da casa numa linha, e o
   balde e a pergunta cuja resposta e a fila. */

.p-hoje {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-bottom: 16px;
  padding: 16px 20px;
  border: 1px solid var(--risco);
  border-left: 4px solid var(--g-risco-2);
  border-radius: var(--r2);
  background: var(--grafite-2);
}

.p-hoje-frase { flex: 1; min-width: 220px; }
.p-hoje-frase b {
  display: block;
  font-family: var(--fonte-tecnica);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--g-texto);
}
.p-hoje-frase small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--g-fraco);
}

/* A cor mora na barra da esquerda e no titulo, nao no fundo. Faixa inteira
   vermelha no topo do painel todo santo dia deixa de ser aviso e vira papel de
   parede — e quando houver um atraso de verdade, ninguem repara. */
.p-hoje.grave   { border-left-color: #d15b4f; }
.p-hoje.grave   .p-hoje-frase b { color: #ff9d8f; }
.p-hoje.atencao { border-left-color: #d1a24f; }
.p-hoje.atencao .p-hoje-frase b { color: #ffce85; }
.p-hoje.bom     { border-left-color: #4ec98a; }
.p-hoje.bom     .p-hoje-frase b { color: #7fdcaa; }

:root[data-tema="claro"] .p-hoje.grave   .p-hoje-frase b { color: #a3271b; }
:root[data-tema="claro"] .p-hoje.atencao .p-hoje-frase b { color: #7a4a00; }
:root[data-tema="claro"] .p-hoje.bom     .p-hoje-frase b { color: #1f7a4d; }

/* ---------- os baldes ---------- */

.p-baldes { display: flex; flex-wrap: wrap; gap: 8px; }

.p-balde {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 92px;
  padding: 7px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--r1);
  background: transparent;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--rapido), background var(--rapido);
}
.p-balde:hover { border-color: var(--borda-forte); background: var(--g-alto); }
.p-balde:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.p-balde-num {
  font-family: var(--fonte-tecnica);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--g-texto);
  font-variant-numeric: tabular-nums;
}
.p-balde-rot { font-size: 10.5px; color: var(--g-fraco); white-space: nowrap; }

.p-balde.grave   .p-balde-num { color: #ff9d8f; }
.p-balde.atencao .p-balde-num { color: #ffce85; }
:root[data-tema="claro"] .p-balde.grave   .p-balde-num { color: #a3271b; }
:root[data-tema="claro"] .p-balde.atencao .p-balde-num { color: #7a4a00; }

/* Escolhido: o balde acende inteiro. E o unico estado em que ele afirma alguma
   coisa sobre a lista de baixo, entao tem que ser inconfundivel. */
.p-balde.ativo {
  border-color: var(--acento);
  background: var(--acento-fundo);
}
.p-balde.ativo .p-balde-rot { color: var(--acento); }

.p-limpar {
  padding: 3px 10px;
  border: 1px solid var(--acento);
  border-radius: 20px;
  background: var(--acento-fundo);
  color: var(--acento);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.p-limpar:hover { border-color: var(--acento-claro); }

/* ---------- as tiras ---------- */

.p-tiras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 224px));
  justify-content: start;
  gap: 10px;
  margin-bottom: 16px;
}

.p-tira {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--risco);
  border-radius: var(--r2);
  background: var(--grafite-2);
  text-align: left;
}
.p-tira.clicavel {
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--rapido);
}
.p-tira.clicavel:hover { border-color: var(--acento); }

.p-tira-rot {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--g-fraco);
}
.p-tira-num {
  font-family: var(--fonte-tecnica);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.3px;
  color: var(--g-texto);
  font-variant-numeric: tabular-nums;
}
/* A unidade nao e o numero: entra menor e cinza, senao "kg" compete com o valor. */
.p-tira-num i {
  margin-left: 3px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  color: var(--g-fraco);
}
.p-tira-pe { font-size: 11px; color: var(--g-fraco); min-height: 14px; }
.p-tira-pe b { font-weight: 700; }
.p-tira-pe .sobe  { color: #4ec98a; }
.p-tira-pe .desce { color: #ff9d8f; }
:root[data-tema="claro"] .p-tira-pe .sobe  { color: #1f7a4d; }
:root[data-tema="claro"] .p-tira-pe .desce { color: #b3261e; }

/* A fila e uma lista que se le linha a linha; a rosca e os graficos se leem de
   relance. Onde couber, a fila fica com o dobro da largura. */
@media (min-width: 1080px) {
  .p-grade .p-fila { grid-column: span 2; }
}


/* ==========================================================================
   Quadro de produção — repaginada
   ==========================================================================
   O quadro é lido EM PÉ, de relance, por quem está com a mão suja. Antes o
   cartão gastava 218px de altura e quase metade era botão: três rótulos longos
   que quebravam em duas e três linhas dentro da coluna estreita. O conteúdo —
   quem é o cliente, quanto pesa, quando vence — disputava espaço com a chapelada
   de ações que quase nunca são clicadas.

   Agora a borda esquerda é o PRAZO (a única coisa visível do outro lado da
   bancada), a data virou palavra, obra e descrição viraram uma linha só, e o
   cartão inteiro abre a ficha. */

/* ---------- resumo na barra ---------- */

.quadro-resumo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--borda);
}
.quadro-resumo b {
  font-family: var(--fonte-tecnica);
  font-size: 15px;
  font-weight: 700;
  color: var(--g-texto);
  font-variant-numeric: tabular-nums;
}
.quadro-resumo > span { font-size: 11.5px; color: var(--g-fraco); }
.quadro-resumo .quadro-atraso,
.coluna-kanban .col-atraso {
  padding: 1px 7px;
  border-radius: 9px;
  background: #4a1f24;
  color: #ff9d9d;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}
:root[data-tema="claro"] .quadro-resumo .quadro-atraso,
:root[data-tema="claro"] .coluna-kanban .col-atraso { background: #fdeceb; color: #b3261e; }

/* ---------- a coluna ---------- */

/* Um tom por etapa, na bolinha e em nada mais. A coluna inteira colorida
   competiria com o vermelho do atraso, que é o único aviso do quadro. */
.coluna-kanban .col-ponto {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: hsl(calc(200 + var(--ordem, 0) * 42) 55% 60%);
}
.coluna-kanban.fim .col-ponto { background: #4ec98a; }

.coluna-kanban header { flex-wrap: wrap; padding-bottom: 8px; }
.coluna-kanban .col-atraso { margin-left: auto; }
.coluna-kanban .col-atraso + .peso-coluna { margin-left: 0; }

/* Coluna vazia precisa parecer alvo, não defeito. */
.pilha-vazia {
  margin: 0;
  padding: 18px 10px;
  border: 1px dashed var(--borda);
  border-radius: var(--r1);
  text-align: center;
  font-size: 11.5px;
  color: var(--g-fraco);
}

/* ---------- o cartão ---------- */

.cartao-kanban {
  position: relative;
  padding: 11px 13px;
  border-left-width: 4px;
  transition: border-color var(--rapido), transform var(--rapido), box-shadow var(--rapido);
}
.cartao-kanban:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.cartao-kanban:hover { transform: translateY(-1px); }

/* O PRAZO NA BORDA. Era azul em todo cartão — uma cor que não dizia nada. */
.cartao-kanban            { border-left-color: var(--g-risco-2); }
.cartao-kanban.perto      { border-left-color: #d1a24f; }
.cartao-kanban.atrasado   { border-left-color: #d15b4f; }
.cartao-kanban.entregue   { border-left-color: #4ec98a; }

/* ----------------------------------------------------------------------------
   O CARTAO DO QUADRO: o que se le de longe.

   Ele tinha oito coisas do mesmo tamanho — selo, prazo, peso, cliente,
   material, observacao, rodape e duas fileiras de botoes — e o olho tinha que
   ler o cartao inteiro para achar as tres que importam: DE QUEM, O QUE e
   QUANTO. Agora essas tres sao as maiores, as acoes foram para a gaveta do "⋯"
   e o resto ficou pequeno e fraco.
   -------------------------------------------------------------------------- */

.ck-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

/* O NOME DO CLIENTE, que e a primeira pergunta. Sobe de 13,5 para 16 e ganha
   peso: a 13,5 ele competia com o rodape, que e o que menos importa. */
.ck-cliente {
  margin: 0 0 3px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.2px;
}

/* O MATERIAL GANHA A COR DO TIPO — ver matizDoMaterial, em telas.js. Sem
   "--matiz-material" ele cai no tom de texto de sempre, entao tela antiga e
   cartao sem codigo continuam legiveis. */
.ck-material {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: hsl(var(--matiz-material, 210) 55% 70%);
  /* Duas linhas no maximo: "PIL-03 + VIG-SUP-02 + VIG-SUP-03" de um cartao
     juntado encheria o cartao sozinho. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
:root[data-tema="claro"] .ck-material { color: hsl(var(--matiz-material, 210) 55% 34%); }

/* O PESO e a terceira pergunta, e por isso ele e numero grande e nao mais um
   selo no alto. O "kg" fica pequeno do lado: a unidade nunca muda. */
.ck-numeros {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 6px;
}
.ck-peso {
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--g-texto, var(--navy));
}
.ck-peso small { font-size: 10.5px; font-weight: 700; opacity: .6; }
.ck-el { font-size: 11px; color: var(--g-fraco, var(--tinta-fraca)); }

/* O numero pelo qual o cliente cobra no telefone. Fica ao lado do peso e nao no
   rodape: e identificacao, nao procedencia. */
.ck-pedido {
  padding: 1px 6px;
  border: 1px solid var(--borda);
  border-radius: 4px;
  font-size: 10px;
  color: var(--g-fraco);
  font-variant-numeric: tabular-nums;
}

/* "Entrega 02/09/2026" obriga a fazer a conta contra hoje. "3 dias atrás" ja e
   a resposta — e fica na primeira linha porque e ele que decide se este cartao
   interessa AGORA. */
/* "Entrega:" entra menor e mais fraco: e rotulo, e o que se le e a data. */
.ck-prazo i {
  font-style: normal;
  font-weight: 600;
  opacity: .7;
}
.ck-prazo {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--g-alto-2);
  color: var(--g-medio);
}
.ck-prazo.atrasado { background: #4a1f24; color: #ff9d9d; }
.ck-prazo.perto    { background: #46351a; color: #ffce85; }
:root[data-tema="claro"] .ck-prazo          { background: #eef1f5; color: #5f6b78; }
:root[data-tema="claro"] .ck-prazo.atrasado { background: #fdeceb; color: #b3261e; }
:root[data-tema="claro"] .ck-prazo.perto    { background: #fff2dd; color: #7a4a00; }

.ck-marcas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; }

/* O "⋯". Fica sempre visivel — esconder no hover deixaria de fora quem usa por
   toque, e o quadro roda em tela de chao de fabrica. Alvo de 28px, que e o
   minimo para o dedo. */
.ck-menu {
  flex: none;
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--g-fraco, var(--tinta-fraca));
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--rapido), color var(--rapido), border-color var(--rapido);
}
.ck-menu:hover,
.ck-menu:focus-visible {
  background: var(--g-alto-2);
  border-color: var(--borda);
  color: var(--acento);
}

.cartao-kanban footer { margin-top: 9px; padding-top: 7px; }

/* ---------- a gaveta de acoes da ficha ---------- */

/* As etapas em botoes, e nao numa caixinha "mover…": na caixinha os nomes so
   apareciam depois de abrir, e a etapa em que a ficha esta sumia da lista —
   quem abria perdia a referencia de onde ela estava. */
.menu-etapas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--e3); }
.menu-etapa {
  flex: 1 1 128px;
  padding: 9px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--g-alto, #fff);
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--rapido), background var(--rapido);
}
.menu-etapa:hover { border-color: var(--acento); background: var(--g-alto-2); }

/* Onde a ficha esta agora: marcada e sem clique — nao e destino. */
.menu-etapa.aqui {
  display: block;
  border-style: dashed;
  opacity: .75;
  cursor: default;
}
.menu-etapa.aqui small {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--g-fraco, var(--tinta-fraca));
}
/* A etapa escolhida na gaveta de envio — ali a escolha e o destino, e nao a
   posicao de hoje. */
.menu-etapa.escolhida {
  border-color: var(--acento);
  background: var(--acento-fundo, var(--g-alto-2));
  color: var(--acento);
}

.menu-equipe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--e3);
  padding: 9px 11px;
  border: 1px solid var(--borda);
  border-radius: 8px;
}

.menu-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--e3); }
.menu-acoes .botao-claro { flex: 1 1 auto; }

/* ==========================================================================
   Link de cadastro — o que o cliente preenche
   ========================================================================== */

/* O link e o produto desta janela: inteiro, selecionavel, com o copiar do lado.
   Escondido atras de um icone, alguem ia acabar digitando a mao. */
.link-caixa { display: flex; gap: 8px; margin: var(--e3) 0; }
.link-caixa input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--r1);
  background: var(--g-alto);
  color: var(--g-texto);
  font-family: var(--fonte-tecnica);
  font-size: 13px;
}
.link-caixa .botao { flex: none; }

/* Cadastro que ninguem daqui conferiu. Nao e erro — e um aviso de que vale
   uma olhada antes de faturar. Por isso ambar, e nao vermelho. */
.selo-convite {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 8px;
  border-radius: 9px;
  background: #46351a;
  color: #ffce85;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
:root[data-tema="claro"] .selo-convite { background: #fff2dd; color: #7a4a00; }

/* O endereço da obra é o que decide para onde o caminhão vai. Na capa do
   cadastro ele fica marcado, e não como mais uma etiqueta igual às outras. */
.cd-ficha.destaque-obra {
  border-left: 3px solid var(--acento);
  background: var(--acento-fundo);
}
.cd-ficha.destaque-obra i { color: var(--acento); }
:root[data-tema="claro"] .cd-ficha.destaque-obra i { color: var(--acento-claro); }

/* Campo com unidade colada. O "kg" dentro da caixa evita o rótulo repetir a
   unidade e evita a dúvida de quem digita em tonelada. */
.campo-com-sufixo { position: relative; display: block; }
.campo-com-sufixo input { width: 100%; padding-right: 34px; }
.campo-com-sufixo .sufixo {
  position: absolute;
  right: 11px; top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--g-fraco);
  text-transform: none;
  letter-spacing: 0;
  pointer-events: none;
}

/* Explicação curta dentro do rótulo, sem virar outra linha. */
.rotulo-fraco { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--g-fraco); }

/* ---------- arquivo de entregas ---------- */

.filtros-entregues { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filtros-entregues .campo-busca { min-width: 210px; }
.filtros-entregues input[type="date"] {
  padding: 7px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--r1);
  background: var(--g-alto);
  color: var(--g-texto);
  font: inherit;
  font-size: 12.5px;
}

/* Quantas e quantos quilos, do recorte que está na tela. Quem filtrou por um
   dia quer o total daquele dia, não o total de tudo. */
.resumo-entregues {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--g-fraco);
}
.resumo-entregues b {
  font-family: var(--fonte-tecnica);
  font-size: 14px;
  color: var(--g-texto);
  font-variant-numeric: tabular-nums;
}

/* O cabeçalho de "Pedidos entregues" carrega dois campos além do título, e o
   título cedia primeiro: quebrava em duas linhas enquanto os campos
   empilhavam. Quem manda na sobra é o campo de busca. */
.folha > .cabecalho-bloco:has(.filtros-entregues) { flex-wrap: wrap; gap: 10px; }
.cabecalho-bloco .filtros-entregues { margin-left: auto; flex: 1 1 260px; justify-content: flex-end; }
.cabecalho-bloco h2:has(+ .filtros-entregues) { white-space: nowrap; }

/* ==========================================================================
   Folha da expedição — só no papel
   ==========================================================================
   A tela e o papel têm leitores diferentes: quem está na tela remarca datas e
   arrasta pedidos; quem está com o papel confere caixa por caixa e carrega o
   caminhão. A mesma lista não serve aos dois, então são duas — e cada uma só
   aparece no seu meio. */

.folha-expedicao { display: none; }

.link-caixa.link-rota { margin-top: 14px; }

@media print {
  /*
    A FOLHA SOZINHA NA PAGINA.

    Nao basta esconder a lista de botoes: o calendario continua atras da janela e
    sai impresso junto — um mes em grade que nao serve para ninguem no patio.

    A CADEIA da folha ate a raiz e:
      .folha-expedicao > .painel-dia > .fundo-painel > #conteudo > .corpo >
      .area > .app

    Entao NAO da para esconder ".app": ele e ancestral da propria folha, e some
    tudo — foi o que aconteceu, a folha saiu em branco. O caminho e o contrario:
    "display: contents" em cada elo da cadeia, que os faz sumir do layout sem
    levar os filhos junto, e "display: none" so no que fica FORA da cadeia.

    O ":not(.fundo-painel)" e o que apaga o calendario: ele e irmao da janela
    dentro do conteudo.
  */
  body:has(.painel-dia) .app,
  body:has(.painel-dia) .area,
  body:has(.painel-dia) .corpo,
  body:has(.painel-dia) .conteudo,
  body:has(.painel-dia) .fundo-painel,
  body:has(.painel-dia) .painel-dia { display: contents !important; }

  body:has(.painel-dia) .lateral-menu,
  body:has(.painel-dia) .topo,
  body:has(.painel-dia) .avulso,
  body:has(.painel-dia) .faixa-atualizacao,
  body:has(.painel-dia) .conteudo > *:not(.fundo-painel) { display: none !important; }

  .painel-dia .linhas-entrega,
  .painel-dia .acoes-form,
  .painel-dia > h2,
  .painel-dia > .dica { display: none !important; }

  .painel-dia { max-width: none; box-shadow: none; border: 0; padding: 0; background: #fff; }
  .fundo-painel { background: #fff !important; }

  .folha-expedicao, .folha-expedicao * {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .folha-expedicao { display: block; }

  /* ---------- o formato do papel ----------

     A folha tem seis colunas e duas delas sao texto solto: o material e o
     endereco inteiro, com rua, bairro e cidade. Em A4 EM PE cada uma fica com um
     terco de folha e quebra em tres linhas — e uma linha de conferencia que
     ocupa tres linhas cansa quem le e come folha.

     DEITADA, a mesma linha cabe de uma vez e ainda sobra espaco para o nome do
     cliente inteiro. E o padrao.

     Pagina NOMEADA, como a da etiqueta: e o unico jeito de um documento sair
     deitado e o outro em pe no mesmo programa. O ".deitada" so existe quando a
     pessoa escolheu deitada na janela do dia; sem ele vale o @page comum, que e
     A4 em pe, e a folha sai exatamente como saia antes. */
  @page paisagem { size: A4 landscape; margin: 10mm 9mm; }
  .folha-expedicao.deitada { page: paisagem; }

  /* ---------- o topo ----------

     Tres partes: quem manda, que dia e, e quanto e. Era uma coluna so, com o
     titulo, o dia da semana, a contagem e o peso empilhados em letra miuda.

     Quem pega esta folha responde duas perguntas antes de comecar a conferir:
     "e do dia certo?" e "quantas cargas sao?". As duas agora tem lugar proprio e
     tamanho proprio — o dia no meio, em corpo grande, e os numeros na direita,
     que e onde o olho termina a linha. */
  .fe-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 7px;
    margin-bottom: 12px;
    border-bottom: 2.5pt solid #000;
  }

  .fe-marca { flex: 0 0 auto; max-width: 32%; }

  /* A marca ocupa o lugar que era do nome escrito. Teto baixo de proposito: e
     uma folha de conferencia, e o logo grande empurraria linha para a segunda
     pagina. */
  .fe-logo { display: block; max-height: 44px; max-width: 180px; }
  .fe-nome { display: block; font-size: 12.5pt; line-height: 1.1; }
  .fe-emitido {
    display: block;
    margin-top: 3px;
    font-size: 7.5pt;
    white-space: nowrap;
  }

  .fe-titulo { flex: 1 1 auto; text-align: center; }
  .fe-etiqueta-folha {
    display: block;
    font-size: 7.5pt;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  .fe-topo h1 {
    margin: 1px 0 0;
    font-size: 16pt;
    line-height: 1.15;
    letter-spacing: -.2px;
  }
  .fe-titulo small { font-size: 9pt; }

  /* Os dois numeros grandes: e por eles que se confere, no fim do dia, se saiu o
     que estava marcado para sair. */
  .fe-numeros { display: flex; gap: 16px; flex: 0 0 auto; text-align: right; }
  .fe-num b {
    display: block;
    font-size: 17pt;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .fe-num i {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 7.5pt;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* ---------- a tabela ----------

     Sem grade. Eram doze linhas pretas de 1pt cruzando a folha, e o desenho que
     saltava era a grade, nao o que estava escrito dentro dela.

     Ficou: risco preto embaixo do cabecalho e em cima do total, risco fino entre
     as linhas, risco claro entre as colunas — o bastante para o olho nao trocar
     de linha no meio do caminho, que e o risco real numa folha deitada. */
  .fe-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
    table-layout: fixed;
  }

  /* O cabecalho cinza precisa vir MESMO com o "background: transparent" de cima:
     e ele que separa o titulo das linhas quando a folha e fotocopiada. */
  .fe-tabela thead th {
    background: #e7e7e7 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border: 0;
    border-bottom: 1.5pt solid #000;
    padding: 5px 7px;
    font-size: 8pt;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    vertical-align: bottom;
  }

  .fe-tabela td {
    border: 0;
    border-bottom: .5pt solid #b0b0b0;
    border-right: .5pt solid #dcdcdc;
    padding: 6px 7px;
    text-align: left;
    vertical-align: top;
  }
  .fe-tabela th:last-child, .fe-tabela td:last-child { border-right: 0; }

  /* Uma linha sim, uma nao, em cinza claro. Numa folha deitada a linha tem 27 cm
     de ponta a ponta: sem o sombreado, o olho que sai do nome do cliente e vai
     ate o endereco desce de linha no meio do caminho e o conferente marca a
     carga errada. */
  .fe-tabela tbody tr:nth-child(even) td {
    background: #f2f2f2 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Quem lancou, embaixo do numero: menor e sem negrito, porque a coluna e do
     NUMERO — o nome e o complemento de quem for perguntar. */
  .fe-quem { display: block; margin-top: 1px; font-size: 8pt; }

  /* O rotulo de duas linhas do cabecalho dessa coluna. */
  .fe-tabela thead th small {
    display: block;
    margin-top: 1px;
    font-size: 6.5pt;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: none;
  }

  .fe-tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .fe-tabela .forte { font-weight: 700; font-size: 10pt; }
  .fe-tabela .n { text-align: center; font-variant-numeric: tabular-nums; }
  .fe-tabela td.n { font-weight: 700; }

  /* Uma letra escrita a mao cabe em 12mm. A altura da linha ja e dada pelo
     resto; aqui so o espaco em branco e a moldura. */
  .fe-tabela td.mot { height: 28px; border-left: .5pt solid #b0b0b0; }

  /* Larguras em porcentagem, todas, e somando 100. Antes eram tres em
     porcentagem e tres em pixel: a conta dava 116% de folha e o navegador
     encolhia todo mundo por conta propria — as colunas nunca ficavam onde a
     regra dizia.

     A coluna do visto: sem ela o papel não tem onde marcar o que já subiu no
     caminhão, e vira papel que a pessoa deixa na mesa. */
  .fe-tabela col.c-n      { width:  4%; }
  .fe-tabela col.c-quem   { width: 23%; }
  .fe-tabela col.c-pedido { width:  9%; }
  .fe-tabela col.c-oque   { width: 25%; }
  .fe-tabela col.c-peso   { width:  8%; }
  .fe-tabela col.c-onde   { width: 25%; }
  .fe-tabela col.c-mot    { width:  6%; }

  /* Deitada sobram 8,5 cm de largura, e eles vao para onde falta: o endereco,
     que e o que o motorista le, e o nome do cliente, que e o que o conferente
     procura. */
  .deitada .fe-tabela col.c-n      { width:  3%; }
  .deitada .fe-tabela col.c-quem   { width: 21%; }
  .deitada .fe-tabela col.c-pedido { width:  9%; }
  .deitada .fe-tabela col.c-oque   { width: 24%; }
  .deitada .fe-tabela col.c-peso   { width:  7%; }
  .deitada .fe-tabela col.c-onde   { width: 31%; }
  .deitada .fe-tabela col.c-mot    { width:  5%; }

  /* Quebra por PALAVRA. "break-word" partia "CONSTRUTORA" em "CONSTRUT/ORA" —
     nome de cliente cortado no meio e pior do que linha a mais. */
  .fe-tabela td, .fe-tabela th { overflow-wrap: normal; word-break: normal; hyphens: none; }

  /* Telefone, placa e recado entram menores, embaixo do principal: sao o que se
     consulta QUANDO da problema, e nao o que se le correndo a lista. */
  .fe-sub, .fe-obs { display: block; font-size: 8pt; }
  .fe-obs { margin-top: 2px; font-style: italic; }

  /* O aviso com barra na lateral, e nao caixa fechada: caixa com moldura preta
     ao lado de uma tabela com moldura preta vira a mesma coisa que a tabela. */
  .fe-aviso {
    margin: 0 0 10px;
    padding: 6px 10px 6px 12px;
    border: 0;
    border-left: 3pt solid #000;
    background: #f0f0f0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 9pt;
    font-weight: 700;
  }

  .fe-tabela tfoot td {
    border: 0;
    border-top: 1.5pt solid #000;
    padding: 6px 7px;
    font-weight: 700;
    background: transparent !important;
  }
  .fe-tabela tfoot td:first-child {
    text-align: right;
    font-size: 8.5pt;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* Endereço faltando não pode passar despercebido no papel: é a diferença
     entre o caminhão achar a obra e não achar. */
  .fe-falta { text-decoration: underline; }

  /* ---------- o endereço, em três linhas ----------

     No papel nao ha rolagem nem "title": o que nao esta impresso nao existe
     para quem esta no caminhao. Entao sai TUDO — rua com numero e complemento,
     bairro e cidade —, cada parte na sua linha.

     Em linhas separadas porque a coluna e estreita: uma frase corrida quebraria
     em tres linhas de qualquer jeito, so que nos lugares errados, com o bairro
     partido ao meio.

     E o BAIRRO em caixa alta e negrito porque e por ele que se agrupa o
     roteiro: lendo a coluna de cima a baixo, as entregas do mesmo lado da
     cidade tem que saltar sem precisar ler o resto. */
  .fe-rua, .fe-local { display: block; }
  .fe-rua { font-size: 9pt; }

  /* O bairro fica INLINE agora: ele divide a linha com a cidade, que vem na
     frente. Com "display: block" — como era quando eram tres linhas — ele
     empurrava a cidade para uma linha so dele e a economia se perdia. */
  .fe-bairro { font-weight: 700; text-transform: uppercase; }
  .fe-local { font-size: 8.5pt; }

  /* Linha não parte no meio entre duas páginas. */
  .fe-tabela tr { break-inside: avoid; }
  .fe-tabela thead { display: table-header-group; }

}



/* ==========================================================================
   ABA TRANCADA
   --------------------------------------------------------------------------
   Ela continua na lista, apagada e com cadeado. Some-la faria quem usava o setor
   achar que o sistema perdeu a aba e ligar perguntando; assim a resposta esta na
   propria tela, e o cadeado diz que e temporario.
   ========================================================================== */

/* A relacao de pedidos dentro do painel: cabecalho menor e altura limitada, para
   ela nao empurrar os botoes de salvar para fora da janela quando houver muitos. */
/* Rola nos dois sentidos: em janela estreita a coluna dos botoes ficava fora da
   borda do painel, e "Editar" era inalcancavel. */
/* Teto de altura, e nao a lista inteira: com trinta pedidos cadastrados ela
   empurraria o "Salvar" para fora da janela. 420px mostram seis linhas — o
   bastante para ver se aquele cliente ja tem pedido aberto, que e a pergunta de
   quem abre esta janela. Eram 320, de quando a linha tinha uma altura so. */
.lista-simples { margin-top: 18px; max-height: 420px; overflow: auto; }
.lista-simples h2 { font-size: 13px; }
.lista-simples tr.em-edicao { background: var(--acento-veu); }

/* O atalho do estribo: um bloco a parte, com moldura, para nao se confundir com
   as cotas do desenho — ele nao muda a peca, so preenche a contagem. */
/* O seletor de etapa no cartao do quadro: discreto, do tamanho dos botoes ao
   lado. Ele e um atalho, nao o assunto do cartao. */
/* Piso de 58px: com o lapis na fileira, o seletor encolhia ate virar "m…".
   Abaixo disso ele deixa de dizer o que e. */

.calculo-estribo {
  margin: 10px 0;
  padding: 10px;
  border: 1px dashed var(--borda-forte, #4a5666);
  border-radius: var(--r1);
}
.calculo-estribo .campo-inline { margin-bottom: 6px; }

.servico.trancada {
  opacity: .45;
  cursor: not-allowed;
}
.servico.trancada:hover { background: none; }
.servico-cadeado { margin-left: auto; font-size: 11px; line-height: 1; }

/* ==========================================================================
   Título do documento na barra
   ==========================================================================
   A descrição do projeto vem do arquivo do calculista e não tem tamanho: "Vigas
   baldrame V1–V26 (EL −0,20) + cintas C1–C5 (EL −0,75) + VBA1–VBA3 (EL −1,50)"
   é uma entrada comum. Emendada numa frase só com o código e a contagem, ela era
   o único pedaço elástico da barra e cedia tudo para os seis botões ao lado —
   sobrava uma coluna de uma palavra por linha. */

.barra-ferramentas { flex-wrap: wrap; }

.titulo-doc { flex: 1 1 260px; min-width: 0; max-width: 480px; }

.td-topo { display: flex; align-items: baseline; gap: 10px; }
.td-codigo {
  font-family: var(--fonte-tecnica);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--g-texto);
}
.td-conta {
  font-size: 12px;
  color: var(--g-fraco);
  white-space: nowrap;
}

/* Duas linhas e reticências. O texto inteiro fica no "title": a descrição serve
   para confirmar que a ficha é a certa, e para isso o começo dela basta. */
.td-descricao {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--g-medio);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sem código (montagem), a descrição É o título. */
.titulo-doc:not(:has(.td-codigo)) .td-descricao {
  margin-top: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--g-texto);
  -webkit-line-clamp: 2;
}

@media print { .titulo-doc { display: none !important; } }

/* A fileira de baixo do cartão da fila: o selo de "Retira" à esquerda, e os
   botões à direita.

   Os botões ficam SEMPRE visíveis, e não só no hover como era o "Editar": esta
   tela também roda em tablet, onde hover não existe — e "dar baixa" é a única
   saída da fila para o pedido que o cliente veio buscar. O cartão continua
   servindo para arrastar: os botões são pequenos e ficam na borda de baixo,
   longe do meio, que é por onde se pega. */
.ce-lado { flex: 1; min-width: 0; }

.ce-acoes-fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.ce-acoes-fila .botao-mini { padding: 2px 8px; font-size: 10.5px; }
/* Os botões sempre à direita: com o selo de "Retira" na frente, um empurra o
   outro para as duas pontas da linha; sem ele, o próprio botão se empurra. */
.ce-acoes-fila .ce-retira { margin-right: auto; }
.ce-acoes-fila .botao-mini:first-child { margin-left: auto; }

.ce-retira {
  padding: 1px 7px;
  border: 1px solid var(--alerta);
  border-radius: 999px;
  color: var(--alerta);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* As pastilhas que recortam a fila: tudo, só as de retira, só as sem data. */
.filtro-fila { display: flex; gap: 4px; margin: 0 0 8px; }
.filtro-fila button {
  flex: 1;
  padding: 4px 6px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: transparent;
  color: var(--g-fraco, var(--tinta-fraca));
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.filtro-fila button.ativo {
  border-color: var(--acento);
  background: var(--acento-veu, transparent);
  color: var(--acento);
}

/* O atalho no título de uma seção do formulário: fica na mesma linha, à
   direita, e não vira um botão solto entre os campos. */
.titulo-campos.com-atalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

/* O canto de cima e do botao: o nome nao entra ali.

   Sem esta reserva o "Editar" aparecia POR CIMA do nome do cliente ao passar o
   mouse — e era justamente no cartao de nome comprido, o que mais precisa ser
   lido inteiro. O espaco fica vago mesmo com o botao escondido: nome que muda
   de largura quando o mouse passa e pior do que um canto vazio. */
.cartao-entrega.de-fora .ce-nome { padding-right: 52px; }

/* ==========================================================================
   Materiais do pedido — a lista dentro da janela
   ==========================================================================
   Os campos daqui ficam FORA de ".grade-campos", que é quem veste os formulários
   do programa. Sem estilo próprio eles saíam no visual cru do navegador —
   pequenos, sem moldura, destoando de tudo em volta na mesma janela. */

.itens-pedido {
  margin-top: var(--e4);
  padding: 16px;
  border: 1px solid var(--borda);
  border-radius: var(--r2);
  background: var(--g-alto);
}

.ip-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--borda);
}
.ip-topo h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--g-texto);
}

/* Onde este texto vai parar depois de salvo. Sem isso, "Materiais" e so mais um
   campo do formulario; com isso, quem digita sabe que esta escrevendo a linha
   que o conferente vai ler no papel — e escreve pensando nele. */
.ip-topo h3 small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--g-fraco);
}

/* O total cresce enquanto a pessoa digita: sem ele, saber quanto vai no
   caminhão exigiria somar de cabeça — que é o erro que esta lista veio evitar.
   Por isso ele é o maior número da janela. */
.ip-soma { text-align: right; line-height: 1; }
.ip-soma small {
  display: block;
  margin-bottom: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--g-fraco);
}
.ip-total {
  font-family: var(--fonte-tecnica);
  font-size: 24px;
  font-weight: 700;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.ip-total i {
  margin-left: 3px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  color: var(--g-fraco);
}
:root[data-tema="claro"] .ip-total { color: var(--acento-claro); }

/* Rótulos de coluna: a linha tem dois campos de naturezas diferentes lado a
   lado, e o segundo é estreito. Sem "peso" escrito em cima, a caixa pequena com
   "0" dentro poderia ser quantidade, número de itens ou qualquer outra coisa. */
.ip-cabecalho {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--g-fraco);
}
.ip-rot-material { flex: 1; min-width: 0; }
.ip-rot-peso { flex: 0 0 126px; }
.ip-rot-vago { flex: 0 0 32px; }

.ip-linha {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

/* O número da linha. Serve para conferir contra a nota do fornecedor sem contar
   com o dedo, e dá ao conjunto cara de lista — não de campos soltos. */
.ip-num {
  flex: none;
  width: 16px;
  font-family: var(--fonte-tecnica);
  font-size: 12px;
  font-weight: 700;
  color: var(--g-fraco);
  text-align: right;
}

.ip-linha input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--borda);
  border-radius: var(--r1);
  background: var(--g-base);
  color: var(--g-texto);
  font-family: inherit;
  font-size: 14px;
}
.ip-linha input:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-veu);
}
.ip-linha input::placeholder { color: var(--g-fraco); }

.ip-linha .ip-material { flex: 1; min-width: 0; }

/* O "kg" mora dentro da caixa: fora dela roubaria largura do campo, e a unidade
   colada no número é como ela é lida em voz alta. */
.ip-peso-caixa { flex: 0 0 126px; position: relative; }
.ip-peso-caixa input {
  width: 100%;
  padding-right: 34px;
  text-align: right;
  font-family: var(--fonte-tecnica);
  font-variant-numeric: tabular-nums;
}
.ip-kg {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--g-fraco);
  pointer-events: none;
}

/* A linha em branco no fim é um convite, não um campo esquecido: fica tracejada
   até alguém escrever nela. */
.ip-linha.nova input { border-style: dashed; background: transparent; }

.ip-linha .ip-tirar {
  flex: 0 0 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r1);
  background: transparent;
  color: var(--g-fraco);
  cursor: pointer;
  transition: background var(--rapido), color var(--rapido);
}
.ip-linha .ip-tirar svg { width: 15px; height: 15px; }
.ip-linha .ip-tirar:hover { background: #4a1f24; color: #ff9d9d; }
:root[data-tema="claro"] .ip-linha .ip-tirar:hover { background: #fdeceb; color: #b3261e; }

/* Acrescentar é a ação mais usada desta janela depois de digitar: ocupa a
   largura toda, tracejado como a linha vazia, para se ler como continuação da
   lista e não como botão de formulário. */
.ip-mais {
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--r1);
  background: transparent;
  color: var(--g-medio);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--rapido), color var(--rapido);
}
.ip-mais span { font-size: 15px; font-weight: 700; margin-right: 3px; }
.ip-mais:hover { border-color: var(--acento); color: var(--acento); }

/* O painel padrão tem 420px — bastava quando a janela era três campos. Com a
   lista de materiais sobravam 153px para escrever "coliunas 07x14 e barra". */
.painel-peca:has(.itens-pedido) { width: 580px; }

@media (max-width: 700px) {
  .painel-peca:has(.itens-pedido) { width: 100%; }

  /* Em tela estreita a linha vira dois andares: o material ocupa a largura toda
     e o peso fica embaixo. Espremer os dois lado a lado deixaria o material com
     meia dúzia de caracteres à vista. */
  .ip-cabecalho { display: none; }
  .ip-linha { flex-wrap: wrap; }
  .ip-linha .ip-material { flex: 1 1 100%; order: 1; }
  .ip-num { order: 0; }
  .ip-peso-caixa { order: 2; margin-left: 26px; }
  .ip-linha .ip-tirar { order: 3; }
}

/* O que pega carona fica em azul e com "+" na frente, para nao se confundir com
   o que a ficha ja traz: sao pesos de origens diferentes.

   ATENCAO: aqui havia um "display: block" — sobra do desenho antigo, em que a
   carona era uma LINHA a parte dentro do bloco da entrega. Depois que a linha
   virou grade de duas alturas, esse block continuava valendo (esta regra vem
   depois no arquivo e ganha da outra) e quebrava a coluna do material em duas
   linhas so quando havia carona. O defeito aparecia numa entrega em cada dez, e
   por isso escapou de dois testes meus.

   Se for mexer aqui: a cor pode mudar; o display, nao. */

/* ==========================================================================
   O MENU QUE ENCOLHE
   --------------------------------------------------------------------------
   Nasceu do celular. Num telefone de 400px o menu fixo de 232px comia quase
   metade da largura, e o que sobrava para o trabalho era uma coluna onde o
   painel saia cortado no meio da palavra.

   Duas larguras, dois comportamentos, e o mesmo botao:

     TELA LARGA   o menu sai e volta. Quem esta o dia todo na mesma tela ganha
                  a largura dele; quem anda entre telas deixa aberto. E de
                  quem usa a escolha, nao minha.

     TELA ESTREITA  o menu vira gaveta POR CIMA do conteudo, e nasce fechado.
                  Empurrar o conteudo para o lado nao resolveria nada: a conta
                  continua sendo 400 menos 232.

   Nao ha fundo escuro atras da gaveta. Ele seria mais um elemento so para
   receber um toque, e esse toque ja e tratado: clique fora do menu fecha.
   ========================================================================== */

.botao-menu {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r1);
  background: transparent;
  color: var(--g-fraco);
  cursor: pointer;
}
.botao-menu:hover { background: var(--g-alto); color: var(--g-texto); }
.botao-menu svg { width: 19px; height: 19px; }

.app.menu-fechado .lateral-menu { display: none; }

@media (max-width: 900px) {
  /* Gaveta: sai do fluxo e passa por cima, entao a largura dela nao e
     descontada do conteudo. */
  .app:not(.menu-fechado) .lateral-menu {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: 60;
    width: min(272px, 80vw);
    box-shadow: 0 0 40px #0009;
  }

  /* Num telefone o dedo precisa de alvo maior, e o topo tem lugar de sobra
     depois que o menu saiu de cena. */
  .botao-menu { width: 40px; height: 40px; }
  .botao-menu svg { width: 22px; height: 22px; }
}

/* O que sobrou da primeira versao da ordenacao — ".le-ordem", ".le-numero" e
   ".le-seta" — foi para junto do resto da linha, la em cima. Ficando aqui, no
   fim do arquivo, essas regras GANHAVAM das novas por vir depois: a seta
   continuava com 22px quando a nova pedia 16, e a linha inteira ficava 20px
   mais alta do que devia.

   Dois defeitos assim no mesmo dia, este e o "display: block" da carona. Ao
   mudar o desenho de um bloco, procure o nome da classe no arquivo INTEIRO. */

.dica-ordem { margin: 0 0 var(--e3); }

.linha-entrega[data-ordenavel] { cursor: grab; }
.linha-entrega.arrastando { opacity: .45; }

/* Onde vai cair. A borda em cima e embaixo, e nao um contorno inteiro, porque
   o que se escolhe aqui e uma POSICAO na fila, nao um alvo. */
.linha-entrega.sobre {
  outline: 2px dashed var(--acento);
  outline-offset: 2px;
}

/* O bairro, destacado em toda parte onde sai endereco. E por ele que quem
   carrega agrupa o roteiro — duas entregas do mesmo bairro vao no mesmo
   caminhao —, entao ele tem que saltar da linha sem precisar ler o resto. */
.bairro { font-weight: 700; }

/* Quem levou, na tabela de entregues.

   Nasceu para uma inicial — 62px, centralizado e em maiusculas. Deixou de
   servir no dia em que o nome passou a vir sozinho da rota: "Joao Carlos" nao
   cabe em 62px, e forcar maiuscula em nome proprio e feio no lugar errado.
   Agora e um campo de nome, que continua editavel para o que a rota nao sabe. */
.campo-motorista {
  width: 140px;
  padding: 3px 7px;
  border: 1px solid var(--borda);
  border-radius: 4px;
  background: var(--g-fundo);
  color: var(--g-texto);
  font: inherit;
  font-size: 12px;
}
.campo-motorista:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

/* Gravou e o servidor recusou: a borda avisa que aquele campo nao esta salvo. */
.campo-motorista.erro { border-color: var(--erro); }

.comprovante { white-space: nowrap; }

/* ----------------------------------------------------------------------------
   A TABELA RISCADA — uma só, para todas as listas que precisam de grade.

   Risco entre TODAS as células, de pé e deitado; largura mandada pelo
   "colgroup" de cada tabela; uma linha por célula, com reticências e o texto
   inteiro no "title". É isso que faz todas as linhas terem a mesma altura — e
   altura igual é o que transforma uma lista de recados numa tabela que se lê
   correndo o olho por uma coluna.

   Quem usa: o arquivo de entregas e o levantamento da mão de obra. Cada um traz
   só as suas larguras, logo abaixo.
   -------------------------------------------------------------------------- */
.tabela-riscada { table-layout: fixed; }

.tabela-riscada th,
.tabela-riscada td {
  border: 1px solid var(--borda);
  padding: 5px 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabela-riscada thead th { background: var(--g-alto-2); }
.tabela-riscada tbody tr:nth-child(even) td { background: var(--g-alto); }
.tabela-riscada tbody tr:hover td { background: var(--acento-veu, var(--g-alto-2)); }

/* ---------- o levantamento da mão de obra ---------- */

/* Pedido e cliente em colunas SEPARADAS: eram os dois na mesma célula, um em
   cima do outro, e a linha ficava com duas alturas. */
.tabela-mao col.tm-pedido   { width: 104px; }
.tabela-mao col.tm-cliente  { width: 27%; }
.tabela-mao col.tm-oque     { width: 27%; }
.tabela-mao col.tm-peso     { width: 96px; }
.tabela-mao col.tm-dia      { width: 104px; }
.tabela-mao col.tm-situacao { width: 128px; }

.tabela-mao td { font-variant-numeric: tabular-nums; }
.tabela-mao .selo { max-width: 100%; }

/* ----------------------------------------------------------------------------
   O ARQUIVO DE ENTREGAS, QUADRICULADO.

   Eram oito colunas sem largura dita, e o navegador reparte dando mais a quem
   NÃO quebra: o campo do motorista e o "Voltar para a fila" ficavam folgados
   enquanto o nome do cliente saía em três andares — cada linha com uma altura
   diferente, e a tabela parecendo uma lista de recados.

   Agora cada coluna tem o seu tamanho, cada célula cabe numa linha, e há risco
   entre TODAS elas — de pé e deitado. O texto que não couber sai com
   reticências e fica inteiro no "title".
   -------------------------------------------------------------------------- */
/* O que tem tamanho conhecido (peso, dia, botoes) fica fixo; o que e texto de
   verdade (cliente, obra) fica com a sobra. Medido: "CONSTRUTORA SÃO JOSÉ LTDA"
   cabe inteiro em 25%. */
.tabela-entregues col.te-cliente   { width: 25%; }
.tabela-entregues col.te-obra      { width: 21%; }
.tabela-entregues col.te-etapa     { width: 10%; }
.tabela-entregues col.te-peso      { width: 86px; }
.tabela-entregues col.te-dia       { width: 92px; }
.tabela-entregues col.te-motorista { width: 138px; }
.tabela-entregues col.te-foto      { width: 104px; }
.tabela-entregues col.te-acoes     { width: 100px; }

/* Os controles das duas ultimas colunas encolhem para caber na largura dita. */
.tabela-entregues .campo-motorista { width: 100%; }
.tabela-entregues .comprovante { padding: 4px 6px; }
.tabela-entregues .comprovante .botao-mini,
.tabela-entregues .acoes-linha .botao-mini { padding: 2px 7px; font-size: 10.5px; }
.tabela-entregues .acoes-linha { padding: 4px 6px; }

/* A cidade, onde ela existe: depois do bairro e em tom menor. Ela importa na
   folha impressa — entrega de outra cidade muda o dia do motorista —, mas nao
   pode competir com o bairro, que e o que agrupa o roteiro. */
.cidade { font-style: normal; opacity: .75; }

/* ==========================================================================
   PELE INDUSTRIAL
   ==========================================================================

   A proposta RADICAL, para comparar com as outras tres. Nasce do tema escuro —
   ver aplicarTema — e troca a regua inteira.

   A REFERENCIA NAO E SOFTWARE, e o painel da propria maquina: a IHM de uma
   dobradeira, a botoeira de um forno, o quadro de comando do galpao. Preto
   frio, quina viva, luz de sinalizacao e numero grande. Quem passa na frente da
   tela reconhece o ambiente antes de ler qualquer palavra — e e esse
   reconhecimento que faz o sistema parecer feito PARA aquela fabrica, e nao um
   programa de escritorio adaptado.

   AS QUATRO DECISOES:

   1. QUINA VIVA. Raio 2px, quase quadrado. Nada de canto macio: equipamento nao
      tem canto macio.

   2. AMBAR DE SEGURANCA no lugar do azul. E a cor do aco quente, da sinalizacao
      e do equipamento pesado. Um acento so, forte, em acao principal e estado
      ativo; espalhar tiraria a forca dele.

   3. LUZ DE SINALIZACAO. Verde, ambar e vermelho ganham saturacao alta e viram
      LAMPADA, nao texto colorido. Numa tela preta, e assim que o olho acha o
      atrasado no meio de quarenta fichas — de longe, sem ler.

   4. NUMERO GRANDE E TECNICO. O peso, a contagem e a data sao o assunto; em
      painel de maquina o numero e o que se le a tres metros. Fonte tecnica e
      espacamento largo em todo rotulo.

   A FICHA IMPRESSA NAO MUDA, como em toda aparencia. Papel e papel.
   ========================================================================== */

:root[data-pele="industrial"] {
  /* ---------- preto frio, com degraus curtos ---------- */
  --g-fundo:   #070a0d;
  --g-base:    #0e1217;
  --g-alto:    #151b22;
  --g-alto-2:  #1d252e;
  --g-risco:   #26303a;
  --g-risco-2: #35424f;

  --g-texto:   #eef2f6;
  --g-medio:   #a7b4c0;
  --g-fraco:   #7d8b98;

  /* ---------- ambar de seguranca ---------- */
  --acento:       #ff9f1a;
  --acento-claro: #ffb547;
  --acento-veu:   #ff9f1a1a;
  --acento-fundo: #2a1f0d;

  /* ---------- luz de sinalizacao, nao texto colorido ---------- */
  --ok:     #23c45e;
  --alerta: #ffb020;
  --erro:   #ff4d3d;

  /* ---------- contorno duro: aqui a quina e risco, nao luz ---------- */
  --borda:       #26303a;
  --borda-forte: #3f4e5c;
  --luz-topo:    transparent;

  /* Sem nevoa: o que separa e a linha. Sombra so para o que flutua de verdade. */
  --sombra1: none;
  --sombra2: 0 2px 6px #00000080;
  --sombra3: 0 8px 28px #000000a6;

  /* ---------- quina viva ---------- */
  --r1: 2px; --r2: 2px; --r3: 3px;

  --navy: #0e1217;
  --azul: var(--acento);
  --linha: var(--g-risco);
  --fundo: var(--g-fundo);
  --papel: var(--g-base);
  --tinta: var(--g-texto);
  --tinta-fraca: var(--g-fraco);
}

/* ---------- a quina, onde o raio esta cravado ---------- */
:root[data-pele^="industrial"] .coluna-kanban,
:root[data-pele^="industrial"] .cartao-kanban,
:root[data-pele^="industrial"] .coluna-rota,
:root[data-pele^="industrial"] .cartao-entrega,
:root[data-pele^="industrial"] .folha,
:root[data-pele^="industrial"] .painel-peca,
:root[data-pele^="industrial"] .p-cartao,
:root[data-pele^="industrial"] .tabela-lista,
:root[data-pele^="industrial"] .botao,
:root[data-pele^="industrial"] .botao-claro,
:root[data-pele^="industrial"] .botao-mini,
:root[data-pele^="industrial"] .campo-busca,
:root[data-pele^="industrial"] .selo,
:root[data-pele^="industrial"] .ce-tag,
:root[data-pele^="industrial"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-pele^="industrial"] select,
:root[data-pele^="industrial"] textarea {
  border-radius: 2px;
}

/* ---------- rotulo de placa: tudo em caixa alta, bem espacado ---------- */
:root[data-pele^="industrial"] .barra-ferramentas .titulo-secao,
:root[data-pele^="industrial"] .cabecalho-bloco h2,
:root[data-pele^="industrial"] .folha > h2,
:root[data-pele^="industrial"] .menu-grupo,
:root[data-pele^="industrial"] .coluna-kanban h3,
:root[data-pele^="industrial"] .cr-topo b,
:root[data-pele^="industrial"] .tabela-lista thead th {
  font-family: var(--fonte-tecnica);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* ---------- o numero e o assunto ---------- */
:root[data-pele^="industrial"] .cartao-kanban .peso,
:root[data-pele^="industrial"] .ce-kg,
:root[data-pele^="industrial"] .le-kg b,
:root[data-pele^="industrial"] .peso-coluna,
:root[data-pele^="industrial"] .cr-numeros b,
:root[data-pele^="industrial"] .quadro-resumo b {
  font-family: var(--fonte-tecnica);
  font-size: 15px;
  font-weight: 700;
  color: var(--g-texto);
  letter-spacing: .5px;
}

/* ---------- a coluna vira um modulo de painel ---------- */
:root[data-pele^="industrial"] .coluna-kanban {
  background: var(--g-base);
  border: 1px solid var(--g-risco);
}
:root[data-pele^="industrial"] .coluna-kanban header {
  background: var(--g-alto);
  border-bottom: 1px solid var(--g-risco);
}
:root[data-pele^="industrial"] .coluna-kanban h3 { color: var(--g-medio); font-size: 11px; }

/* O ponto da coluna vira LAMPADA acesa: halo em volta, como LED de painel. */
:root[data-pele^="industrial"] .col-ponto {
  box-shadow: 0 0 0 2px #ffffff0f, 0 0 8px currentColor;
}

/* ---------- a ficha vira modulo, com faixa de estado na esquerda ---------- */
:root[data-pele^="industrial"] .cartao-kanban {
  background: var(--g-alto);
  border: 1px solid var(--g-risco);
  border-left: 3px solid var(--g-risco-2);
  box-shadow: none;
}
:root[data-pele^="industrial"] .cartao-kanban:hover { border-color: var(--borda-forte); }
:root[data-pele^="industrial"] .cartao-kanban.atrasado { border-left-color: var(--erro); }
:root[data-pele^="industrial"] .cartao-kanban.perto    { border-left-color: var(--alerta); }

/* ---------- botao principal: bloco ambar, letra preta ---------- */
:root[data-pele^="industrial"] .botao.primario {
  background: var(--acento);
  border-color: var(--acento);
  color: #0b0d10;
  font-weight: 700;
  letter-spacing: .3px;
  box-shadow: none;
}
:root[data-pele^="industrial"] .botao.primario:hover { background: var(--acento-claro); }

/* ---------- campo: fundo mais fundo que a superficie, linha viva ---------- */
:root[data-pele^="industrial"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-pele^="industrial"] select,
:root[data-pele^="industrial"] textarea {
  background: var(--g-fundo);
  border-color: var(--g-risco-2);
  color: var(--g-texto);
}
:root[data-pele^="industrial"] input:focus,
:root[data-pele^="industrial"] select:focus,
:root[data-pele^="industrial"] textarea:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento-veu);
}

/* ---------- a folha e a tabela: linha no lugar de sombra ---------- */
:root[data-pele^="industrial"] .folha,
:root[data-pele^="industrial"] .p-cartao {
  background: var(--g-base);
  border: 1px solid var(--g-risco);
  box-shadow: none;
}
:root[data-pele^="industrial"] .tabela-lista thead th {
  background: var(--g-alto);
  color: var(--g-fraco);
  font-size: 10px;
  border-bottom: 1px solid var(--g-risco-2);
}

/* ---------- a barra do topo: faixa de comando ---------- */
:root[data-pele^="industrial"] .barra-ferramentas {
  border-bottom: 1px solid var(--g-risco);
  padding-bottom: var(--e3);
}

/* ---------- o menu lateral: item ativo com marca ambar na borda ---------- */
:root[data-pele^="industrial"] .servico.ativo {
  background: var(--g-alto-2);
  box-shadow: inset 3px 0 0 var(--acento);
}

/* Na coluna do motorista o cartao e estreito e divide a largura com o numero da
   parada e dois botoes: ali o numero grande da pele industrial rouba justamente
   o espaco do nome do cliente. Volta ao tamanho normal. */
:root[data-pele^="industrial"] .cartao-entrega.na-rota .ce-kg { font-size: 12px; }

/* ==========================================================================
   PELE INDUSTRIAL — VERSAO CLARA
   ==========================================================================

   A MESMA linguagem da escura: quina viva, ambar de seguranca, luz de
   sinalizacao, rotulo de placa e numero grande. Toda a estrutura e
   compartilhada — os seletores da pele industrial usam "^=", que casa com as
   duas. Aqui muda so a regua de cor.

   NAO E BRANCO, de proposito. Branco puro em tela cheia cansa e nao identifica
   nada. O tom daqui e o CINZA DE EQUIPAMENTO: o cinza-esverdeado da pintura de
   maquina e do quadro de comando, o mesmo que se ve no galpao. Ele deixa o
   ambar e as luzes de estado saltarem sem precisar de fundo preto.

   O AMBAR ESCURECE. O #ff9f1a da versao escura, sobre claro, fica ilegivel e
   berrante. Aqui ele vira ambar queimado — mesma familia, contraste que passa.
   Nos preenchimentos ele volta ao tom vivo, porque ali a letra e preta.
   ========================================================================== */

:root[data-pele="industrial-claro"] {
  /* ---------- cinza de equipamento, do fundo para o alto ---------- */
  --g-fundo:   #d9dee1;   /* o mais fundo: a chapa */
  --g-base:    #eceef0;   /* superficie padrao */
  --g-alto:    #f4f5f6;   /* elevado: cartoes, campos */
  --g-alto-2:  #e0e4e7;   /* menus e itens ativos */
  --g-risco:   #bcc4c9;
  --g-risco-2: #9aa5ac;

  --g-texto:   #14191d;
  --g-medio:   #3b444b;
  --g-fraco:   #5a656d;

  /* ---------- ambar queimado: mesma familia, contraste que passa ---------- */
  --acento:       #9a5a00;
  --acento-claro: #7d4900;
  --acento-veu:   #9a5a0014;
  --acento-fundo: #f5e3c8;

  /* ---------- luz de sinalizacao, escurecida para fundo claro ---------- */
  --ok:     #167a3c;
  --alerta: #9a6200;
  --erro:   #b3261e;

  --borda:       #bcc4c9;
  --borda-forte: #8c979f;
  --luz-topo:    transparent;

  --sombra1: none;
  --sombra2: 0 1px 2px #14191d1a;
  --sombra3: 0 3px 10px #14191d26;

  --r1: 2px; --r2: 2px; --r3: 3px;

  --navy: #2b3339;
  --azul: var(--acento);
  --azul-claro: var(--acento-fundo);
  --azul-borda: var(--g-risco-2);
  --linha: var(--g-risco);
  --fundo: var(--g-fundo);
  --papel: var(--g-base);
  --tinta: var(--g-texto);
  --tinta-fraca: var(--g-fraco);
}

/* O botao principal continua AMBAR VIVO com letra preta: ali a cor e
   preenchimento, e sobre preenchimento o ambar queimado ficaria sujo. */
:root[data-pele="industrial-claro"] .botao.primario {
  background: #f0920d;
  border-color: #d07f06;
  color: #1a1204;
}
:root[data-pele="industrial-claro"] .botao.primario:hover { background: #d07f06; }

/* O LED da coluna: no claro o halo branco some. Vira anel escuro, que e o que
   destaca sobre cinza. */
:root[data-pele="industrial-claro"] .col-ponto {
  box-shadow: 0 0 0 2px #14191d14, 0 0 6px currentColor;
}

/* O campo fica MAIS FUNDO que a superficie, como na versao escura — e o que
   diz "aqui se digita" sem precisar de sombra interna. */
:root[data-pele="industrial-claro"] input:not([type="checkbox"]):not([type="radio"]),
:root[data-pele="industrial-claro"] select,
:root[data-pele="industrial-claro"] textarea {
  background: #ffffff;
  border-color: var(--g-risco-2);
}

/* O cabecalho da coluna do quadro: faixa mais escura que o corpo, como a placa
   de identificacao de um modulo de painel. */
:root[data-pele="industrial-claro"] .coluna-kanban header {
  background: var(--g-alto-2);
  border-bottom: 1px solid var(--g-risco);
}
:root[data-pele="industrial-claro"] .tabela-lista thead th {
  background: var(--g-alto-2);
  border-bottom: 1px solid var(--g-risco-2);
}

/* ==========================================================================
   PAPEL: TINTA PRETA E ETIQUETA BRANCA
   ==========================================================================

   A COR DA EMPRESA continua escolhida na tela Empresa e continua pintando a
   ficha — mas so o que e FUNDO: a faixa do cabecalho, a barra do elemento, a
   linha do romaneio. Ela identifica quem produziu, que e o papel dela.

   TEXTO, NAO. Toda escrita da ficha passa a ser PRETA.

   O motivo e a bancada. A ficha e lida em pe, sob a luz do galpao, e quase
   sempre depois de passar por uma fotocopiadora — e copiadora nao tem cor:
   azul-escuro vira cinza-medio e some contra o papel. Texto colorido tambem
   cansa mais que preto em corpo pequeno, e a tabela de pecas e corpo pequeno.

   A ETIQUETA VAI MAIS LONGE: fundo BRANCO sempre, em qualquer cor de empresa.
   Ela e colada no amarrado e vive no patio — molha, empoeira, pega sol. Fundo
   chapado gasta tinta, borra quando molha e escurece o que esta escrito em
   cima. Papel branco com letra preta e o que continua legivel no fim do dia.

   Este bloco vem DEPOIS do bloco da cor da empresa, de proposito: quem vem por
   ultimo vence.
   ========================================================================== */

/* ---------- a ficha: tinta preta em tudo que e texto ----------

   ":where()" de proposito: ele NAO SOMA especificidade, entao esta regra toda
   pesa o mesmo que ".ficha" sozinho. Sem isso, ".ficha h1" (uma classe mais uma
   tag) venceria a excecao logo abaixo — e o titulo saia PRETO sobre a faixa
   azul-escura do cabecalho, ilegivel. Aconteceu, foi visto na tela. */
.ficha,
.ficha :where(p, li, small, b, span, i, td, th, h1, h2, h3, h4, div),
.bloco-auditoria,
.bloco-auditoria :where(td, th, p, span, b) {
  color: #000;
}

/* A EXCECAO sao as faixas de fundo cheio: ali o preto sumiria dentro da cor.
   Nelas a letra continua sendo a que contrasta — branca sobre escuro. */
.ficha .ficha-topo, .ficha .ficha-topo *,
.ficha .cartao-barra, .ficha .cartao-barra *,
.ficha .tabela-romaneio th,
.ficha .tabela-levantamento thead th,
.ficha .tabela-pecas th,
.ficha-topo, .ficha-topo *, .cartao-barra, .cartao-barra * {
  color: var(--ficha-tinta-escuro, #fff);
}

/* O cabecalho da tabela de pecas e claro em algumas cores de empresa: ali o
   preto volta, senao branco sobre claro fica ilegivel. A conta de qual usar e a
   mesma que o app ja faz para a cor escolhida. */
.ficha .tabela-pecas th { color: var(--ficha-legivel, #000); }

/* Numero da posicao e rotulos que herdavam o azul da marca. */
.ficha .tabela-pecas tbody td:nth-child(1),
.ficha .tabela-pecas tbody td:nth-child(3),
.ficha .tabela-pecas tfoot td,
.ficha .resumo-etapa, .ficha .resumo-etapa *,
.ficha .faixa-meta, .ficha .faixa-meta * { color: #000; }

/* ---------- a etiqueta: papel branco, tinta preta ----------

   A etiqueta EM USO e ".etiqueta.faixa", com as classes "etqf-". Havia tambem
   um modelo antigo com classes "etq-", e ele continua atendido aqui embaixo —
   mas e o "faixa" que sai na impressora hoje. Mexer so no antigo e o erro
   obvio: a regra fica escrita, parece feita, e a etiqueta continua colorida. */

.etiqueta.faixa {
  background: #fff;
  border-color: #000;
}
.etiqueta.faixa .etqf-marca,
.etiqueta.faixa .etqf-nome,
.etiqueta.faixa .etqf-chamada,
.etiqueta.faixa .etqf-contato,
.etiqueta.faixa .etqf-rotulo,
.etiqueta.faixa .etqf-valor,
.etiqueta.faixa .etqf-valor.forte i,
.etiqueta.faixa .etqf-obra,
.etiqueta.faixa .etqf-endereco,
.etiqueta.faixa .etqf-un {
  color: #000;
}

/* Sem fundo colorido, o que separa os campos e a LINHA preta — e ela precisa
   existir, senao a etiqueta vira um bloco de texto solto no papel. */
.etiqueta.faixa .etqf-campo { border-color: #000; }
.etiqueta.faixa .etqf-campos { border-color: #000; }
.etiqueta.faixa .etqf-marca { border-bottom: 1px solid #000; }


.etiqueta,
.etq-topo,
.etq-cliente,
.etq-cliente > span,
.etq-un {
  background: #fff;
  color: #000;
}

.etq-obra, .etq-obra small,
.etq-material b, .etq-material span,
.etq-pos, .etq-pecas, .etq-pecas li,
.etq-endereco {
  color: #000;
}

/* Sem fundo chapado, o que separa os blocos da etiqueta e a LINHA. Preta, fina
   e continua: e o que sobrevive a fotocopia e a poeira. */
.etq-topo { border-bottom: 1px solid #000; }
.etq-cliente { border-bottom: 1px solid #000; }
.etq-material span { border-left-color: #000; }

/* ==========================================================================
   FICHA EM DUAS COLUNAS
   ==========================================================================

   Para gastar cerca de 40% menos folha numa etapa grande — medido, nao
   estimado: ver o comentario de blocoPeca, em ficha.js.

   POR QUE BLOCO E NAO TABELA. Numa linha de tabela o desenho e os sete numeros
   disputam a largura, e o conjunto fecha em 664 px. Duas dessas nao cabem nos
   718 px uteis do A4 — so caberiam encolhendo o desenho, e encolher o desenho
   encolhe as COTAS junto. Cota ilegivel na bancada e pior do que folha a mais;
   isso ja estava decidido aqui desde a primeira vez que a ficha foi apertada.

   Empilhado, o desenho fica com a largura inteira do bloco — os mesmos 290 px,
   cotas do mesmo tamanho — e os numeros descem para uma linha embaixo. O bloco
   fecha em 340 px e dois cabem lado a lado com folga.

   COLUNA DE JORNAL, e nao grade. Com "column-count" as pecas escorrem: enchem a
   coluna da esquerda ate o pe da folha e continuam na direita. Numa grade de
   duas, uma peca alta deixaria um buraco do lado — e buraco em folha impressa e
   exatamente a folha que se queria economizar.
   ========================================================================== */

/* ---------- o que aparece na tela e o que aparece no papel ---------- */
.so-papel { display: none; }
@media print {
  .so-tela  { display: none !important; }
  .so-papel { display: block !important; }
}

/* ==========================================================================
   A RELAÇÃO DO EMPREITEIRO — só no papel
   ==========================================================================
   Uma folha por turma, para arrancar e entregar, ou salvar em PDF e mandar uma
   por uma no fim da semana. */

.folha-mao { display: none; }

@media print {
  /*
    A MESMA CADEIA DA FOLHA DA EXPEDIÇÃO, e pelo mesmo motivo: a relação mora
    dentro de "#conteudo", e esconder um ancestral levaria a relação junto.
    "display: contents" apaga o elo do layout sem levar os filhos.
  */
  body:has(.folha-mao) .app,
  body:has(.folha-mao) .area,
  body:has(.folha-mao) .corpo,
  body:has(.folha-mao) .conteudo { display: contents !important; }

  body:has(.folha-mao) .lateral-menu,
  body:has(.folha-mao) .trilho,
  body:has(.folha-mao) .topo,
  body:has(.folha-mao) .avulso,
  body:has(.folha-mao) .faixa-atualizacao { display: none !important; }

  .folha-mao, .folha-mao * {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .folha-mao { display: block; }

  /* CADA TURMA NUMA FOLHA. A última não empurra uma página em branco. */
  .mao-folha { break-after: page; }
  .mao-folha:last-child { break-after: auto; }

  .mao-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 8px;
    margin-bottom: 14px;
    border-bottom: 2.5pt solid #000;
  }
  .mao-logo { display: block; max-height: 44px; max-width: 180px; margin-bottom: 4px; }
  .mao-nome { display: block; font-size: 12.5pt; }
  .mao-rotulo {
    display: block;
    margin-top: 6px;
    font-size: 7.5pt;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  .mao-topo h1 { margin: 1px 0 0; font-size: 17pt; line-height: 1.15; }
  .mao-tipo { display: block; margin-top: 1px; font-size: 8.5pt; text-transform: lowercase; }
  .mao-topo small { font-size: 9.5pt; }

  .mao-total { text-align: right; flex: none; }
  .mao-total b {
    display: block;
    font-size: 20pt;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .mao-total i {
    display: block;
    font-style: normal;
    font-size: 7.5pt;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .mao-total span { display: block; margin-top: 4px; font-size: 9pt; }

  .mao-tabela { width: 100%; border-collapse: collapse; font-size: 9.5pt; table-layout: fixed; }
  .mao-tabela col.c-quando { width: 15%; }
  .mao-tabela col.c-pedido { width: 13%; }
  .mao-tabela col.c-quem   { width: 27%; }
  .mao-tabela col.c-oque   { width: 30%; }
  .mao-tabela col.c-peso   { width: 15%; }

  .mao-tabela thead th {
    background: #e7e7e7 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border: 0;
    border-bottom: 1.5pt solid #000;
    padding: 5px 7px;
    font-size: 8pt;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
  }
  .mao-tabela td {
    border: 0;
    border-bottom: .5pt solid #b0b0b0;
    padding: 6px 7px;
    vertical-align: top;
    overflow-wrap: normal;
    word-break: normal;
  }
  .mao-tabela tbody tr:nth-child(even) td {
    background: #f2f2f2 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .mao-tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .mao-tabela .forte { font-weight: 700; }
  .mao-tabela tr { break-inside: avoid; }
  .mao-tabela thead { display: table-header-group; }

  .mao-tabela tfoot td {
    border: 0;
    border-top: 1.5pt solid #000;
    padding: 6px 7px;
    font-weight: 700;
  }
  .mao-tabela tfoot td:first-child {
    text-align: right;
    font-size: 8.5pt;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* As duas linhas de assinatura, lado a lado, coladas no fim da tabela. */
  .mao-assina {
    display: flex;
    gap: 40px;
    margin-top: 34px;
    break-inside: avoid;
  }
  .mao-assina span {
    flex: 1 1 0;
    padding-top: 6px;
    border-top: .75pt solid #000;
    font-size: 8.5pt;
    text-align: center;
  }

  .mao-emitido { display: block; margin-top: 14px; font-size: 7.5pt; }
}

/* ---------- os ELEMENTOS em duas colunas ----------

   A unidade que se divide e o ELEMENTO — VB1, VB2, PIL-1 —, e nao a peca. Cada
   elemento vai inteiro para uma coluna: barra do nome, pecas e subtotal juntos.
   Partir um elemento ao meio deixaria metade das barras numa coluna e o subtotal
   na outra, e quem confere perderia a conta.

   COLUNA DE JORNAL, e nao grade: os elementos escorrem: enchem a esquerda ate o
   pe da folha e continuam na direita. Numa grade, um elemento alto deixaria um
   buraco do lado — e buraco e exatamente a folha que se queria economizar. */
.elementos-duas {
  column-count: 2;
  column-gap: 7mm;
  column-rule: 1px solid #ccc;
}

.elementos-duas > .cartao {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 4mm;
}

/* As pecas do modo compacto ficam empilhadas numa coluna so: quem divide em duas
   e o nivel de cima. */
.pecas-blocos { display: block; }

.peca-bloco {
  /* A peca NAO SE PARTE entre uma coluna e outra, nem entre duas folhas: meio
     desenho de um lado e a cota do outro nao serve para ninguem. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;

  padding: 2px 0 4px;
  border-bottom: 1px solid var(--linha, #d8dfe6);
}
.peca-bloco:last-child { border-bottom: 0; }

.pb-desenho { margin: 0; }
.pb-desenho .desenho { margin: 0; }
.pb-desenho svg { max-width: 100%; height: auto; display: block; }

/* UMA LINHA SO, sem rotulo em cima de cada numero. A unidade vai colada
   ("320 cm", "3 un") e faz o trabalho do rotulo sem gastar uma segunda linha —
   e e assim que a bancada fala. */
.pb-dados {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 10px;
  font-size: 10.5px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.pb-pos { font-weight: 700; }
.pb-peso { margin-left: auto; font-family: var(--fonte-tecnica); font-weight: 700; }

.subtotal-duas {
  margin: 4px 0 0;
  padding-top: 4px;
  border-top: 2px solid var(--linha, #d8dfe6);
  text-align: right;
  font-size: 11.5px;
}

.peca-bloco.destacada { background: #fff6d9; }
.peca-bloco.corrigivel { cursor: pointer; }
.peca-bloco.corrigivel:hover { background: var(--acento-veu, #eef6fd); }

@media print {
  /* Na folha o corpo e menor e as colunas ficam mais apertadas: a regua e o
     respiro passam a valer mais que na tela. */
  .pecas-duas { column-gap: 6mm; }
  .peca-bloco { padding: 3px 0 5px; }
  .pb-dados { font-size: 8.8px; gap: 0 7px; }
}

/* ==========================================================================
   A BARRA DE COMANDO — modelo escolhido em 04/10/2026
   ==========================================================================

   Este bloco vem por ULTIMO de proposito: ele vence as regras da lateral
   antiga, que continuam no arquivo (".lateral-menu", ".servico" de coluna,
   ".identidade" de rodape). Mexer nelas uma a uma, espalhadas por tres
   lugares do arquivo, era o jeito garantido de deixar meia regra viva.

   O que muda: a coluna de 232px da esquerda sai, tudo sobe para uma faixa de
   52px, e as abas ficam em linha. Em tela estreita as abas voltam a ser
   gaveta — agora caindo POR BAIXO da barra, e nao por cima do trabalho.
   ========================================================================== */

/* ---------- a fonte ----------

   Numero de largura igual em TODA a tela. Sem isto um "1" e mais estreito que
   um "8", e uma coluna de quilos sai desalinhada de cima a baixo — e dai vem
   metade da impressao de sistema improvisado. "Segoe UI Variable Text" e a
   fonte do Windows 11, que e onde o programa roda; quando nao existe, cai no
   Segoe UI de sempre e nada se perde. */
:root {
  --fonte-texto: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui,
                 -apple-system, sans-serif;
}
body {
  font-family: var(--fonte-texto);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, .titulo-secao { letter-spacing: -.012em; }

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

.app { flex-direction: column; }
.corpo { flex: 1; min-height: 0; height: auto; }

/* A lateral antiga nao existe mais no index.html; a regra fica porque o
   ".app.menu-fechado .lateral-menu" la de cima ainda a procura. */
.lateral-menu { display: none !important; }

/* ---------- a faixa ---------- */

.topo {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0;
  height: 52px;
  padding: 0 var(--e4);
  background: var(--g-base);
  border-bottom: 1px solid var(--borda);
}

.marca-bloco {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding: 0 var(--e4) 0 0;
  margin-right: var(--e3);
  border-right: 1px solid var(--borda);
  height: 28px;
}
.marca-selo { width: 26px; height: 26px; border-radius: var(--r1); }
.marca-selo svg { width: 17px; height: 17px; }
.marca-texto b { font-size: 14px; letter-spacing: .01em; }
.marca-texto small { display: none; }

/* ---------- as abas ---------- */

/*
  "flex: 0 1 auto" com overflow proprio, e a migalha com base ZERO.

  Sem isto a faixa inteira desanda: a migalha pedia a largura do nome do cliente
  e as abas, que podem encolher, cediam — "Manutencao" ficava DEBAIXO do nome da
  obra. Com base zero, a migalha so recebe o que sobrar depois das abas, e quem
  encolhe e ela. Quando nem assim cabe (tela de tablet), a tira de abas rola
  para o lado em vez de empurrar o resto para fora da tela.
*/
/*
  A TIRA DE ABAS NAO RECORTA NADA, e nao encolhe.

  Ela ja teve "overflow-x: auto" para rolar para o lado quando as abas nao
  coubessem. O preco apareceu depois: recorte vale para os dois lados, e o menu
  que cai de "Clientes" ao passar o mouse morria dentro da tira — aparecia a
  altura de um fio e sumia. E item de flex que encolhe deixava o nome da obra,
  na migalha, passar por cima de "Manutencao".

  Hoje a conta e outra: as abas tem a largura que tem, e abaixo de 1200px elas
  viram gaveta (ver o bloco de tela estreita, e ESTREITA no app.js). Acima
  disso cabem com folga, entao nao ha o que rolar nem o que recortar.
*/
.menu-itens {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  height: 100%;
  flex: none;
  overflow: visible;
}

.menu-grupo { display: none; }

.aba-risco {
  align-self: center;
  width: 1px;
  height: 18px;
  margin: 0 var(--e2);
  background: var(--borda);
  flex: none;
}

/*
  A aba. Altura da faixa inteira para o risco aceso nascer na borda de baixo —
  um retangulo pintado atras do texto, como era na coluna, aqui pareceria um
  botao solto no meio da barra.
*/
.topo .servico {
  position: relative;
  width: auto;
  height: 100%;
  padding: 0 14px;
  border-radius: 0;
  background: none;
  color: var(--g-medio);
  font-size: 13.5px;
  white-space: nowrap;
  flex: none;
}
.topo .servico .icone { display: none; }
.topo .servico-nome { flex: none; opacity: 1; }
.topo .servico:hover { background: none; color: var(--g-texto); }
/* A pele industrial pinta a aba acesa com fundo e um risco ambar na BORDA
   ESQUERDA — desenho de coluna. Na faixa, o risco e embaixo e nao ha fundo:
   o seletor precisa da pele junto, senao a regra da pele vence esta por ser
   mais especifica e a aba volta a parecer um botao solto. */
.topo .servico.ativo,
:root[data-pele^="industrial"] .topo .servico.ativo {
  background: none;
  box-shadow: none;
  color: var(--g-texto);
  font-weight: 600;
}
.topo .servico.ativo::before {
  content: "";
  position: absolute;
  left: 10px; right: 10px;
  top: auto; bottom: 0;
  width: auto; height: 2px;
  border-radius: 0;
  background: var(--acento);
}
.topo .servico.trancada { opacity: .4; }
.topo .servico-conta { margin-left: 7px; }

/* ---------- o caminho ---------- */

.topo .migalha {
  min-width: 0;
  flex: 1 1 0;
  padding-left: var(--e3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12.5px;
  color: var(--g-fraco);
}
.topo .migalha:not(:empty) { margin-left: var(--e3); border-left: 1px solid var(--borda); }

/* ---------- o fim da faixa ---------- */

.topo-fim {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex: none;
}
.acao-principal:not(:empty) { padding: 0; }
.acao-principal .botao.primario { width: auto; height: 32px; min-height: 32px; }
.topo-direita { margin-left: 0; }

/* ---------- quem esta logado ---------- */

.eu { position: relative; }

.identidade {
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--borda);
  padding-left: var(--e3);
}
.eu-botao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  border: 1px solid transparent;
  border-radius: var(--r1);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.eu-botao:hover { background: var(--g-alto); border-color: var(--borda); }
.identidade .inicial { width: 28px; height: 28px; border-radius: var(--r1); font-size: 12px; }
.eu-botao .quem-texto { text-align: left; }
.eu-seta { width: 14px; height: 14px; color: var(--g-fraco); flex: none; }

/* O painel que cai do nome. */
.menu-rodape {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 70;
  min-width: 212px;
  margin: 0;
  padding: var(--e2);
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--g-base);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r2);
  box-shadow: var(--sombra3);
}
.item-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r1);
  background: none;
  color: var(--g-medio);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.item-menu:hover { background: var(--g-alto); color: var(--g-texto); }
.item-menu.ativo { color: var(--g-texto); font-weight: 600; }
.item-menu .icone { width: 20px; height: 20px; border-radius: var(--r1); flex: none; }
.item-menu .icone svg, .item-menu > svg { width: 15px; height: 15px; flex: none; }
.item-menu.perigo { color: var(--g-fraco); }
.item-menu.perigo:hover { color: var(--erro); }
.item-risco { height: 1px; margin: var(--e2) 4px; background: var(--borda); }

/* ---------- o botao da gaveta ---------- */

/* Em tela larga as abas estao todas a vista: nao ha o que abrir. */
.botao-menu { display: none; }

/* ==========================================================================
   TELA ESTREITA — as abas viram gaveta outra vez
   ========================================================================== */

@media (max-width: 1340px) {
  /* Antes de esconder qualquer aba, tire o que e enfeite. */
  .topo .migalha { display: none; }
  .marca-texto { display: none; }
  .eu-botao .quem-texto { display: none; }
}

@media (max-width: 1200px) {
  .botao-menu { display: grid; margin-right: var(--e2); }
  .marca-bloco { border-right: 0; padding-right: var(--e2); margin-right: 0; }

  /*
    A gaveta cai POR BAIXO da barra e por cima do conteudo. Antes ela entrava
    pela esquerda cobrindo o trabalho inteiro; aqui ela e uma lista curta
    ancorada no botao que a abriu, que e de onde o dedo acabou de sair.
  */
  .app:not(.menu-fechado) .menu-itens {
    position: fixed;
    top: 52px;
    left: 0;
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    width: min(272px, 82vw);
    padding: var(--e2);
    gap: 2px;
    background: var(--g-base);
    border: 1px solid var(--borda-forte);
    border-top: 0;
    box-shadow: var(--sombra3);
    overflow-y: auto;
    max-height: calc(100vh - 52px);
  }
  .app.menu-fechado .menu-itens { display: none; }

  /* Na gaveta a aba volta a ser linha de lista: icone, nome e o numero. */
  .app:not(.menu-fechado) .topo .servico {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border-radius: var(--r1);
    font-size: 14px;
  }
  .app:not(.menu-fechado) .topo .servico .icone { display: grid; }
  .app:not(.menu-fechado) .topo .servico-nome { flex: 1; }
  .app:not(.menu-fechado) .topo .servico.ativo,
  :root[data-pele^="industrial"] .app:not(.menu-fechado) .topo .servico.ativo {
    background: var(--g-alto-2);
  }
  .app:not(.menu-fechado) .topo .servico.ativo::before {
    left: 0; right: auto; top: 6px; bottom: 6px;
    width: 2px; height: auto;
  }
  .app:not(.menu-fechado) .topo .servico-conta { margin-left: auto; }

  /* Na gaveta o titulo do grupo volta: ali ele cabe e vale. */
  .app:not(.menu-fechado) .menu-grupo { display: block; }
  .aba-risco { display: none; }
}

/* ---------- os numeros do painel, como no modelo ----------

   Eram quatro caixas soltas de largura fixa, encostadas a esquerda, sobrando
   tela a direita. Viram UMA faixa so, dividida por riscos de 1px e ocupando a
   largura inteira — a mesma forma dos quatro numeros da ficha do cliente. O
   numero continua sendo o maior texto da sua linha; o que sai e a moldura
   repetida em volta de cada um. */
.p-tiras {
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  justify-content: stretch;
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--r2);
  overflow: hidden;
}
.p-tira {
  border: 0;
  border-radius: 0;
  background: var(--g-base);
  padding: 14px 16px;
}
/* Sem borda propria nao ha borda para acender: quem avisa que o numero abre
   uma tela e o fundo. */
.p-tira.clicavel:hover { border-color: transparent; background: var(--g-alto); }

/* ==========================================================================
   A TELA INICIAL — "Hoje na fabrica"
   ==========================================================================

   Vem por ULTIMO, como o bloco da barra de comando: vence as regras antigas do
   painel sem precisar cacar cada uma delas pelos quatro lugares do arquivo
   onde ".p-topo" e ".p-cartao" aparecem.
   ========================================================================== */

/* ---------- o cabecalho ---------- */

.p-topo { align-items: center; padding-bottom: 14px; margin-bottom: 16px; }
.p-titulo { min-width: 0; }
.p-topo h1 { font-size: 23px; letter-spacing: -.012em; }
.p-dia {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--g-fraco);
}
/* A logo encolhe: no modelo ela acompanha o titulo, nao o substitui. */
.p-topo .logo-painel { height: 38px; max-width: 200px; }
.marca-painel { font-size: 15px; letter-spacing: .04em; color: var(--g-fraco); }
.p-topo-acoes { gap: 14px; }

/* ---------- o resumo a direita do titulo de cada bloco ---------- */

.p-cartao .cabecalho-bloco { margin-bottom: 12px; }
.p-cartao .cabecalho-bloco h2 { margin: 0; }
.p-conta {
  font-size: 11.5px;
  color: var(--g-fraco);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- o quadro por etapa ---------- */

.p-etapas { display: flex; flex-direction: column; }

/*
  Tres colunas mandadas, e nao tres pedacos negociando largura: o nome da etapa
  tem tamanho conhecido, o peso tambem, e o que sobra e da barra. Sem isto a
  barra de "Corte e dobra" nasce mais curta que a de "Fila" por causa do nome,
  e duas barras que nao comecam no mesmo lugar nao se comparam.
*/
.p-etapa {
  display: grid;
  grid-template-columns: 104px 1fr 88px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 12.5px;
  color: var(--g-medio);
}
.p-etapa:last-child { border-bottom: 0; }
.p-etapa-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-etapa b {
  text-align: right;
  color: var(--g-texto);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.p-etapa b small { font-size: 10.5px; font-weight: 500; color: var(--g-fraco); }

.p-barra-fina {
  height: 8px;
  border-radius: 1px;
  background: var(--g-alto-2);
  overflow: hidden;
}
.p-barra-fina i { display: block; height: 100%; background: var(--acento); }

/* ---------- as listas curtas (equipes, ultimos clientes) ---------- */

.p-lista { list-style: none; margin: 0; padding: 0; }
.p-lista li {
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
  color: var(--g-medio);
}
.p-lista li:last-child { border-bottom: 0; }

/* A linha e a mesma, clicavel ou nao: so muda quem a desenha — <li> direto
   quando nao abre nada, <button> por dentro quando abre. */
.p-lista li,
.p-linha-clicavel {
  display: flex;
  align-items: center;
  gap: 9px;
}
.p-linha-clicavel {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.p-lista li > .p-linha-clicavel { padding: 8px 6px; margin: 0 -6px; border-radius: var(--r1); }
.p-linha-clicavel:hover { background: var(--g-alto); }
.p-lista li:not(:has(.p-linha-clicavel)) { padding: 9px 0; }

.p-pino { width: 6px; height: 6px; border-radius: 50%; background: var(--acento); flex: none; }
.p-lista b {
  color: var(--g-texto);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p-lista-pe { font-size: 11.5px; color: var(--g-fraco); white-space: nowrap; }
.p-kg {
  margin-left: auto;
  color: var(--g-texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}
.p-kg small { font-size: 10.5px; color: var(--g-fraco); }

/* ---------- a relacao de clientes, em tabela riscada ----------

   As larguras sao mandadas, como em toda tabela-riscada: sem o colgroup o
   navegador reparte dando mais a quem NAO quebra, e o nome do cliente — que e
   a unica coluna que se le de verdade — sai em tres andares. */
.tabela-clientes col.tcl-nome    { width: 31%; }
.tabela-clientes col.tcl-cidade  { width: 16%; }
.tabela-clientes col.tcl-contato { width: 16%; }
.tabela-clientes col.tcl-obras   { width: 8%; }
.tabela-clientes col.tcl-peso    { width: 14%; }
.tabela-clientes col.tcl-ultima  { width: 11%; }
.tabela-clientes col.tcl-acoes   { width: 4%; }

.tabela-clientes tbody tr { cursor: pointer; }
.tabela-clientes tbody tr:hover td { background: var(--g-alto); }

/* A marca do cliente encolhe para caber na linha: na linha ela e so um ponto de
   apoio para o olho achar o comeco do nome, nao um retrato. */
.tcl-com-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.tcl-com-marca > b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--g-texto);
  font-weight: 600;
}
.tcl-com-marca .marca-cliente,
.tcl-com-marca > span:first-child {
  width: 22px;
  height: 22px;
  flex: none;
  font-size: 10.5px;
  border-radius: var(--r1);
}
.tcl-com-marca .selo-convite { flex: none; font-size: 9.5px; padding: 1px 5px; }

/* O × so aparece quando o mouse chega na linha: botao vermelho aceso em doze
   linhas de uma vez e um susto por tela. */
.tabela-clientes .acoes-linha .botao-mini { opacity: 0; }
.tabela-clientes tbody tr:hover .acoes-linha .botao-mini,
.tabela-clientes .acoes-linha .botao-mini:focus-visible { opacity: 1; }

/* As abas da relacao e do cadastro reusam .cd-abas da ficha do cliente — a
   mesma forma para a mesma coisa. So o espaco em volta muda: aqui elas vem
   logo abaixo do titulo da tela. */
.conteudo > .cd-abas { margin: 0 0 var(--e4); }

/* ---------- a aba que se desdobra ao passar o mouse ---------- */

.aba-com-menu { position: relative; display: flex; align-items: stretch; }
.aba-seta { margin-left: 5px; font-size: 9px; color: var(--g-fraco); line-height: 1; }
.aba-com-menu:hover .aba-seta,
.topo .servico.ativo .aba-seta { color: inherit; }

/*
  SEM VAO entre a aba e o painel: um unico pixel de buraco entre os dois faz o
  mouse "sair" no caminho e o menu fechar na cara de quem estava indo nele.
  Por isso o topo e exatamente 100% e o respiro vai por dentro, no padding.
*/
.aba-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 70;
  min-width: 204px;
  padding: var(--e2);
  flex-direction: column;
  gap: 1px;
  background: var(--g-base);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r2);
  box-shadow: var(--sombra3);
}
.aba-com-menu:hover .aba-menu,
.aba-com-menu:focus-within .aba-menu { display: flex; }

@media (max-width: 1200px) {
  /* Na gaveta nao ha mouse para passar: as duas portas viram linhas, sempre a
     vista, recuadas para se lerem como filhas da aba de cima. */
  .aba-com-menu { display: block; }
  .aba-seta { display: none; }
  .app:not(.menu-fechado) .aba-menu {
    display: flex;
    position: static;
    min-width: 0;
    padding: 2px 0 2px 28px;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .app:not(.menu-fechado) .aba-menu .item-menu { font-size: 13px; padding: 7px 10px; }
  .app.menu-fechado .aba-menu { display: none; }
}

/* ==========================================================================
   A FICHA DE PRODUÇÃO — a folha da bancada
   ==========================================================================

   Cada ".fp" e UMA FOLHA A4 EM PE, com a margem por dentro: o que se ve na
   tela e, milimetro por milimetro, o que sai na impressora. A reparticao em
   folhas e feita no Ficha.producao, medindo — nao e deixada para o navegador,
   porque o que nao cabe tem que aparecer ANTES de alguem mandar imprimir.

   As cores sao sempre pretas sobre branco, em qualquer pele: esta folha vai
   para a bancada, e papel nao tem tema escuro.
   ========================================================================== */

.fp {
  width: 210mm;
  height: 297mm;
  margin: 0 auto 14px;
  padding: 8mm;
  background: #fff;
  color: #000;
  font-family: "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 2px 12px #0006;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ---------- o cabeçalho, com lugar para a logo ---------- */

.fp-topo { display: flex; align-items: stretch; border: 1.5px solid #000; margin-bottom: 4px; }
.fp-logo {
  width: 30mm;
  flex: none;
  border-right: 1.5px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  background: #f7f8fa;
}
.fp-logo img { max-width: 100%; max-height: 13mm; object-fit: contain; display: block; }
.fp-logo span { font-size: 11px; font-weight: 800; text-align: center; line-height: 1.2; }

.fp-dados { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; }
.fp-campo {
  flex: 1 1 90px;
  min-width: 0;
  padding: 2px 6px;
  border-right: 1px solid #c9d0d7;
  border-bottom: 1px solid #c9d0d7;
}
.fp-campo.grande { flex: 1 1 180px; }
.fp-campo.larga { flex: 1 1 100%; border-right: 0; border-bottom: 0; }
.fp-campo i {
  display: block;
  font-style: normal;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6b737a;
}
.fp-campo b {
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Cliente e obra podem ocupar duas linhas: cortar o nome da obra com
   reticencias numa ficha de bancada e economizar 3mm no lugar errado. */
.fp-campo.grande b {
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 11.5px;
}
.fp-campo b.fino { font-size: 10px; font-weight: 500; color: #444; }

.fp-pe { position: absolute; right: 8mm; bottom: 3mm; font-size: 9px; color: #666; }

/* ---------- as tiras ---------- */

.fp-tiras { flex: 1; min-height: 0; display: flex; gap: 4mm; }
.fp-tira { flex: 1 1 0; min-width: 0; border-left: 1px solid #000; padding-left: 2mm; }
.fp-tira:first-child { border-left: 0; padding-left: 0; }

/* ---------- a faixa do elemento ---------- */

/*
  GRADE DE DUAS COLUNAS, nao uma linha.

  Com "nowrap", um pilar repetido oito vezes — "P1 · P2 · P3 · P4 · P5 · P8 ·
  P10 · P12" — saia por cima da tira vizinha, e o peso de um elemento
  aterrissava em cima do nome do outro. Aqui os nomes quebram em quantas linhas
  precisarem, dentro da propria tira, e o peso fica preso na direita da
  PRIMEIRA linha, que e onde o olho o procura.
*/
.fp-el { border-bottom: 1.5px solid #000; }
.fp-el-cab {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 6px;
  padding: 3px 5px 3px 6px;
  background: #f2f4f7;
  border-bottom: 1px solid #000;
  border-left: 3px solid #000;
  overflow: hidden;
}
.fp-el-cab .esq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; }
.fp-el-cab .n {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .01em;
  min-width: 0;
  word-break: break-word;
}
.fp-el-cab .n i { font-style: normal; font-weight: 400; color: #8a929a; margin: 0 3px; }
.fp-el-cab .sec {
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
  border: 1px solid #9aa3ab;
  border-radius: 2px;
  background: #fff;
  white-space: nowrap;
  flex: none;
}
.fp-el-cab .vezes {
  font-size: 9px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 2px;
  background: #000;
  color: #fff;
  white-space: nowrap;
  flex: none;
}
/* So a descricao do projeto cede, com reticencias: ela e contexto. */
.fp-el-cab .desc {
  flex: 1 1 60px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
  color: #6b737a;
}
.fp-el-cab .kg { font-size: 12px; font-weight: 800; white-space: nowrap; flex: none; }
.fp-el-cab .kg small { font-size: 9px; font-weight: 600; color: #6b737a; }

/* ---------- a linha da peça ---------- */

.fp-cab,
.fp-p { display: flex; align-items: center; gap: 2px; padding: 1px 3px; }
.fp-cab {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #333;
  border-bottom: 1px solid #000;
  padding: 2px 3px;
}
.fp-p {
  border-top: 1px solid #e6eaee;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.fp-p:nth-of-type(even) { background: #fafbfc; }

/* Nada pode vazar da celula: o que nao couber e cortado e APARECE, em vez de
   invadir a coluna do lado sem ninguem notar. */
.fp-p > span,
.fp-cab > span { overflow: hidden; white-space: nowrap; }
.fp-p .c-des { overflow: visible; display: flex; align-items: center; }

.fp .c-pos { width: 46px; flex: none; display: flex; align-items: center; gap: 4px;
             font-weight: 800; font-size: 11px; color: #333; }
.fp .c-des { width: 300px; flex: none; }
.fp .c-bit { width: 52px; flex: none; text-align: right; }
.fp .c-qtd { width: 56px; flex: none; text-align: right; }
.fp .c-com { width: 70px; flex: none; text-align: right; }
.fp .c-aco { flex: 1; text-align: right; color: #444; }

/* A QUANTIDADE E O NUMERO QUE SE EXECUTA: o maior da linha e o unico com
   fundo. Numa folha cheia de numeros parecidos, quem esta na bancada tem que
   achar "quantas" sem ler os outros tres. */
.fp-p .c-qtd {
  font-size: 12.5px;
  font-weight: 800;
  background: #e8ecf0;
  border-radius: 2px;
  padding: 0 4px;
}
.fp-cab .c-qtd { background: none; padding: 0; font-size: 8.5px; font-weight: 700; }

.fp .forma {
  display: inline-grid;
  place-items: center;
  min-width: 15px;
  height: 13px;
  padding: 0 3px;
  background: #4a5560;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  font-style: normal;
  border-radius: 2px;
  vertical-align: middle;
}

/* ---------- duas e três tiras ----------

   O VAO E A MARGEM ENTRAM NA CONTA DA LARGURA. A tira de duas colunas tem
   359px; cinco colunas somando 354 "cabiam" — menos os vaos e a margem, que
   ninguem tinha somado: o comprimento saia 27px para fora e imprimia por cima
   da borda. Orcamento real: 359 - 8 de vao - 6 de margem = 345. */

.fp.duas .c-pos { width: 44px; }
.fp.duas .c-des { width: 190px; }
.fp.duas .c-bit { width: 34px; }
.fp.duas .c-qtd { width: 48px; }
.fp.duas .c-com { width: 29px; }
.fp.duas .c-aco { display: none; }



/* ---------- os dois quadros do fim ---------- */

.fp-resumo { border: 1.5px solid #000; margin-top: 4px; }
.fp-resumo-tit {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 2px 5px;
  background: #000;
  color: #fff;
}
.fp-resumo table { width: 100%; border-collapse: collapse; font-size: 11px;
                   font-variant-numeric: tabular-nums; }
.fp-resumo th {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #444;
  text-align: right;
  padding: 1px 6px;
  border-bottom: 1px solid #000;
}
.fp-resumo th:first-child { text-align: left; }
.fp-resumo td { padding: 1px 6px; text-align: right; border-bottom: 1px solid #e0e5ea; }
.fp-resumo td:first-child { text-align: left; font-weight: 700; }
.fp-resumo tfoot td { border-top: 1.5px solid #000; border-bottom: 0; font-weight: 800;
                      background: #f2f4f7; }
.fp-formas td:first-child { padding: 1px 4px; }
.fp-formas .forte { font-weight: 800; background: #e8ecf0; }

/* O desenho dentro da ficha de produção é sempre preto, venha de onde vier. */
.fp .desenho svg .aco { stroke: #000; }
.fp .desenho svg text { fill: #000; }
.fp .desenho svg .cota { stroke: #666; }

/* ---------- no papel ---------- */

@media print {
  /* Pagina PROPRIA, sem margem: a margem ja esta dentro da folha, e e assim
     que 210x297mm na tela viram 210x297mm no papel. Ver o mesmo recurso em
     "@page paisagem", da folha de expedicao. */
  @page fichaProducao { size: A4 portrait; margin: 0; }

  .fp {
    page: fichaProducao;
    margin: 0;
    box-shadow: none;
    break-after: page;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .fp:last-child { break-after: auto; }

  /* A moldura do sistema nao vai para o papel. */
  .folhas-producao ~ *, .barra-ferramentas { display: none !important; }
}

/* As chaves da ficha de produção, na barra de ferramentas. */
.caixa-miuda {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--g-medio);
  white-space: nowrap;
  cursor: pointer;
}
.caixa-miuda input { margin: 0; accent-color: var(--acento); }
.conta-folhas {
  font-size: 12px;
  font-weight: 600;
  color: var(--acento);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* A ficha de produção é uma pilha de folhas brancas: o fundo em volta é o da
   tela, e a folha não herda a pele escura. */
.folhas-producao { display: flex; flex-direction: column; align-items: center; padding: 6px 0 20px; }
@media print { .folhas-producao { padding: 0; } }

/* O desenho dentro do resumo de peças: a mesma forma que está nas folhas de
   cima, miúda. A célula não encosta nas vizinhas — a largura é mandada, como
   em toda coluna desta folha. */
.fp-formas td.des { width: 196px; padding: 0 3px; }
.fp-formas td.des .desenho { display: flex; align-items: center; }
.fp-formas th:nth-child(2) { text-align: left; }
.fp.duas .fp-formas td.des { width: 150px; }
.fp.duas .fp-formas td.des svg { max-width: 100%; height: auto; }

/* ---------- as opções de impressão da ficha ----------

   Um botão na barra e um painel que cai dele. Elas não mudam a tela, e por
   isso não ficam soltas entre os botões que mudam: solto, um controle que
   parece não fazer nada é um controle que alguém clica duas vezes. */

.menu-impressao { position: relative; display: inline-flex; }

.painel-impressao {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  width: 300px;
  padding: var(--e3);
  background: var(--g-base);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r2);
  box-shadow: var(--sombra3);
  text-align: left;
}
.painel-impressao h4 {
  margin: 0 0 var(--e3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g-fraco);
}
.painel-impressao .linha-chave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding-bottom: var(--e3);
  margin-bottom: var(--e3);
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
  color: var(--g-texto);
}
.painel-impressao .caixa-miuda.larga {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: var(--e2) 0;
  font-size: 13px;
  white-space: normal;
}
.painel-impressao .caixa-miuda.larga input { margin-top: 2px; flex: none; }
.painel-impressao .caixa-miuda.larga b { display: block; color: var(--g-texto); font-weight: 600; }
.painel-impressao .caixa-miuda.larga small {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--g-fraco);
}
.painel-impressao .dica {
  margin: var(--e3) 0 0;
  padding-top: var(--e3);
  border-top: 1px solid var(--borda);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--g-fraco);
}
.painel-impressao .dica b { color: var(--acento); }


/* ---------- a carga de cada dia, no calendário de entregas ----------

   A barra compara o peso do dia com a régua guardada em Configurações — "um
   dia bom de entrega sai com tanto". É referência, não teto: o sistema não
   impede marcar mais nada, e sem régua guardada a barra nem existe. */

.grade-mes .dia .carga-dia {
  display: block;
  height: 4px;
  margin: 2px 0 3px;
  border-radius: 1px;
  background: var(--g-alto-2);
  overflow: hidden;
}
.grade-mes .dia .carga-dia i { display: block; height: 100%; background: var(--ok); }
.grade-mes .dia .carga-dia.cheio i    { background: var(--alerta); }
.grade-mes .dia .carga-dia.estourou i { background: var(--erro); }

/* A contagem do dia ganhou o número de entregas junto do peso: "3 · 3.750 kg".
   O peso sozinho não dizia se era uma carga grande ou três pequenas. */
.grade-mes .dia .conta-dia b { color: var(--g-texto); font-weight: 700; }

/* Dia vazio diz que está vazio. Casinha em branco parecia dia não carregado
   ainda — e é nele que sobra caminhão, que é o que se procura. */
.grade-mes .dia .dia-vazio { font-size: 10px; color: #3d4751; }
.grade-mes .dia.com-entrega .dia-vazio { display: none; }

.regua-carga {
  margin-left: auto;
  font-size: 11px;
  color: var(--g-fraco);
  white-space: nowrap;
}

/* O total do mês, ao lado do nome dele. */
.mes-topo .total-mes {
  font-size: 12px;
  color: var(--g-fraco);
  white-space: nowrap;
}

/* O ponto da situação dentro da miniatura: verde pronto, cinza na bancada,
   âmbar sem endereço. A tarja continua tingida pelo CLIENTE — são duas
   perguntas diferentes e cada uma tem o seu sinal. */
.mini-entrega .ponto-situacao {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 4px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--ok);
}
.mini-entrega .ponto-situacao.fazendo { background: var(--g-fraco); }
.mini-entrega .ponto-situacao.falta   { background: var(--alerta); }

/* ==========================================================================
   O PAINEL DO DIA, na vista dos motoristas
   ==========================================================================

   Cinco numeros e a semana em tira. A tela abria pedindo filtro — um campo de
   data vazio e duas colunas —, e quem chega de manha quer as respostas antes
   de perguntar.
   ========================================================================== */

.ent-numeros {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-bottom: 10px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--r2);
  overflow: hidden;
}
.ent-numeros > div { background: var(--g-base); padding: 9px 13px; }
.ent-numeros .rot {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--g-fraco);
}
.ent-numeros .num { display: block; font-size: 22px; font-weight: 600; line-height: 1.25; }
.ent-numeros .num.alerta { color: var(--alerta); }
.ent-numeros .num.erro   { color: var(--erro); }
.ent-numeros .pe { display: block; font-size: 11.5px; color: var(--g-fraco); }

/* ---------- a semana em tira ---------- */

.ent-semana {
  display: flex;
  gap: 1px;
  margin-bottom: 12px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--r2);
  overflow: hidden;
}
.ent-semana button {
  flex: 1;
  min-width: 0;
  padding: 7px 6px;
  border: 0;
  background: var(--g-base);
  color: var(--g-medio);
  font: inherit;
  cursor: pointer;
  text-align: center;
}
.ent-semana button:hover { background: var(--g-alto); }
.ent-semana button.ativo { background: var(--acento-fundo); color: var(--acento-claro); }
.ent-semana .d {
  display: block;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ent-semana .n { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; }
.ent-semana .kg { display: block; font-size: 10.5px; color: var(--g-fraco); white-space: nowrap; }
.ent-semana button.ativo .d,
.ent-semana button.ativo .kg { color: var(--acento); }
.ent-semana .limpar {
  flex: none;
  padding: 0 14px;
  font-size: 11.5px;
  color: var(--g-fraco);
}

/* ---------- a coluna do motorista, arrumada ----------

   Cabeçalho numa linha só: inicial, nome com a placa e, na ponta, quantas
   paradas e quantos quilos. Os botões descem para uma faixa fina — nenhum dos
   três é o que se faz montando a rota. */

.coluna-rota .cr-topo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
}
.cr-ini {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--r1);
  background: var(--acento-fundo);
  color: var(--acento);
  font-size: 12px;
  font-weight: 700;
}
.cr-ini.patio { background: var(--g-alto-2); color: var(--g-medio); font-size: 13px; }
.cr-quem { flex: 1; min-width: 0; }
.cr-quem b {
  display: block;
  font-size: 13.5px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr-quem small {
  display: block;
  font-size: 10.5px;
  color: var(--g-fraco);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coluna-rota .cr-topo .cr-carga {
  flex: none;
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--g-fraco);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* "display: inline" de propósito: a coluna do motorista tem uma regra antiga
   que veste todo <b> do cabeçalho como bloco — e era ela que empilhava
   "2 / 4.120 / kg" em três linhas dentro de uma caixa de 38px. Reaproveitar o
   cabeçalho trouxe o estilo dele junto, como sempre. */
.coluna-rota .cr-topo .cr-carga b { display: inline; color: var(--g-texto); font-weight: 700; }

.coluna-rota .cr-acoes {
  display: flex;
  gap: 5px;
  padding: 0 10px 7px;
  border-bottom: 1px solid var(--borda);
}

/* Os três recortes e o campo de data numa fileira só. */
.coluna-rota .filtro-fila {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 7px 10px;
  border-bottom: 1px solid var(--borda);
}
.filtro-fila .dia-solto input {
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--borda);
  border-radius: var(--r1);
  background: var(--g-alto);
  color: var(--g-medio);
  font: inherit;
  font-size: 11.5px;
}
.filtro-fila .escondidos { font-size: 11px; color: var(--g-fraco); }

/* ==========================================================================
   A GAVETA DO PEDIDO DE FORA
   ==========================================================================

   Entra pela direita e deixa o quadro a vista. A janela no meio da tela tapava
   justamente o que a pessoa precisa olhar enquanto decide a data e o caminhao.
   ========================================================================== */

.gaveta-pedido {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  width: min(430px, 94vw);
  background: var(--g-base);
  border-left: 1px solid var(--borda-forte);
  box-shadow: -10px 0 40px #000a;
}
.gaveta-pedido form { display: flex; flex-direction: column; height: 100%; }

.gp-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--e4);
  border-bottom: 1px solid var(--borda);
}
.gp-topo b { display: block; font-size: 15px; }
.gp-topo small { display: block; font-size: 11.5px; color: var(--g-fraco); }
.gp-topo .botao-icone { margin-left: auto; width: 30px; height: 30px; flex: none; }

/* O corpo rola; o pé e o topo ficam. */
.gp-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--e4); }

.gp-bloco { margin-bottom: var(--e5); }
.gp-bloco > h4 {
  margin: 0 0 var(--e3);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--borda);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--g-fraco);
}
/*
  O RÓTULO EM CIMA, O CAMPO EMBAIXO, SEMPRE.

  Fora da ".grade-campos" o <label> do sistema volta a ser linha: o rótulo e o
  campo saíam lado a lado, cada campo com a largura do que sobrou, e a gaveta
  virava uma escadinha. Aqui a regra é explícita, porque a gaveta não usa a
  grade — ela tem blocos próprios.
*/
.gp-bloco label {
  display: block;
  margin-bottom: var(--e3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g-fraco);
}
.gp-bloco label input,
.gp-bloco label select {
  display: block;
  width: 100%;
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.gp-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.gp-duplo label { margin-bottom: 0; }

.gp-atalhos { display: flex; gap: 5px; margin-top: 4px; }
.gp-atalhos .botao-mini { flex: 1; justify-content: center; white-space: nowrap; }

.gp-excluir { width: 100%; }

.gp-pe {
  display: flex;
  gap: var(--e2);
  padding: 11px var(--e4);
  border-top: 1px solid var(--borda);
  background: var(--g-alto);
}
.gp-pe .botao,
.gp-pe .botao-claro { flex: 1; justify-content: center; }

/* O fundo escurece o resto, mas não cobre a gaveta. */
.gaveta-pedido ~ .fundo-painel,
.fundo-painel:has(+ .gaveta-pedido) { z-index: 70; }

/* ---------- os campos da gaveta ----------

   Fora da ".grade-campos" o input do sistema fica sem altura nem respiro: na
   gaveta eles saíam como um fio, e escrever num fio cansa. Aqui a medida é
   explícita — 40px de altura, que é o alvo confortável de um dedo e de um
   olho, e o mesmo que o resto do sistema usa nos campos grandes. */

.gaveta-pedido .gp-bloco label {
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--g-fraco);
}
.gaveta-pedido .gp-bloco label input,
.gaveta-pedido .gp-bloco label select {
  height: 40px;
  margin-top: 5px;
  padding: 0 12px;
  border: 1px solid var(--borda);
  border-radius: var(--r2);
  font-size: 14px;
  line-height: 38px;
}
.gaveta-pedido .gp-bloco label input::placeholder { color: var(--g-fraco); opacity: .65; }

/* O foco é um anel, não uma troca de cor: numa gaveta de oito campos, quem
   digita precisa achar onde está sem procurar o cursor. */
.gaveta-pedido .gp-bloco label input:focus,
.gaveta-pedido .gp-bloco label select:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-veu);
  outline: none;
}

/* Os atalhos de data na altura do campo ao lado — dois controles que fazem a
   mesma coisa não podem ter tamanhos diferentes. */
.gaveta-pedido .gp-atalhos { margin-top: 5px; gap: 6px; }
.gaveta-pedido .gp-atalhos .botao-mini {
  height: 40px;
  padding: 0 10px;
  font-size: 12.5px;
  border-radius: var(--r2);
}

/* A lista de materiais segue a mesma régua. */
.gaveta-pedido .itens-pedido input {
  height: 38px;
  padding: 0 10px;
  font-size: 13.5px;
  border-radius: var(--r1);
}
.gaveta-pedido .itens-pedido { border: 0; padding: 0; background: none; }
.gaveta-pedido .gp-bloco { margin-bottom: 22px; }
.gaveta-pedido .gp-bloco > h4 { margin-bottom: 10px; }

/* O filtro de motorista no arquivo das entregas, do tamanho dos vizinhos. */
.filtros-entregues select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--borda);
  border-radius: var(--r-pilula, var(--r2));
  background: var(--g-alto);
  color: var(--g-medio);
  font: inherit;
  font-size: 13px;
}
.filtros-entregues select:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-veu);
  outline: none;
}

/* ==========================================================================
   A ENTRADA — um cartão só, no meio
   ==========================================================================

   Era uma tela dividida: metade esquerda com grade cinza e um parágrafo
   genérico, metade direita com o formulário. A esquerda não dizia nada que
   ajudasse a entrar, e em tela estreita — o tablet da produção, o celular —
   as duas metades brigavam.
   ========================================================================== */

.entrada-centro {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 16px;
  background:
    radial-gradient(760px 420px at 50% 0%, #ffffff07, transparent 70%),
    var(--g-fundo, #0a0e12);
}

.entrada-cartao {
  position: relative;
  width: min(400px, 100%);
  padding: 34px 32px;
  background: var(--g-base);
  border: 1px solid var(--borda);
  border-radius: var(--r3, 5px);
  box-shadow: var(--sombra3, 0 20px 60px #0008);
}
.entrada-cartao .engrenagem { position: absolute; top: 12px; right: 12px; }

.ec-marca { text-align: center; margin-bottom: 26px; }
.ec-marca .entrada-sigla {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: var(--r2);
  background: var(--acento);
  color: #201400;
  font-size: 17px;
  font-weight: 800;
}
.ec-marca h1 {
  margin: 0 0 3px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .1em;
}
.ec-marca p { margin: 0; font-size: 12.5px; color: var(--g-fraco); }
.ec-risco {
  display: block;
  width: 46px;
  height: 2px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: var(--acento);
}

/* Os campos do cartão: 46px, que é o alvo confortável do dedo e do olho. */
.entrada-cartao .entrada-caixa { padding: 0; background: none; border: 0; }
.entrada-cartao .entrada-caixa h2 { font-size: 15px; }
.entrada-cartao label { display: block; margin-bottom: 14px; }
.entrada-cartao input {
  display: block;
  width: 100%;
  height: 46px;
  margin-top: 6px;
  padding: 0 14px;
  font-size: 15px;
  border-radius: var(--r2);
}
.entrada-cartao .botao.largo { width: 100%; height: 48px; font-size: 15px; font-weight: 700; }

.entrada-centro .entrada-estado {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--g-fraco);
}

.ec-claude {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: var(--r2);
  background: none;
  color: var(--g-fraco);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.ec-claude:hover { color: var(--g-texto); border-color: var(--borda); background: var(--g-alto); }
.ec-claude svg { width: 15px; height: 15px; flex: none; }

/* Os campos do cartão de entrada: fundo, contorno e foco próprios. O estilo
   antigo desta tela desenhava o campo como um fio embaixo — bonito na tela
   dividida, invisível dentro de um cartão escuro. */
/* Os campos do cartão: fundo, contorno e foco vindos do TEMA. Estavam em
   hexadecimal cravado — um cinza escuro que, no tema claro, desenhava um campo
   preto no meio de um cartão branco. */
.entrada-cartao input {
  border: 1px solid var(--g-risco-2) !important;
  background: var(--g-alto) !important;
  color: var(--g-texto);
}
.entrada-cartao input:focus {
  border-color: var(--acento) !important;
  box-shadow: 0 0 0 3px var(--acento-veu);
  outline: none;
}
.entrada-cartao input::placeholder { color: var(--g-fraco); }

/* A entrada veste o ACENTO do sistema: a marca e o botão são a mesma cor que a
   pessoa vai ver nas abas depois de entrar. Era o âmbar cravado em três
   lugares, e quando o acento virou azul-aço a porta de entrada ficou sendo a
   única parte do sistema ainda laranja. */
.entrada-cartao .ec-marca .entrada-sigla { background: var(--acento); color: #fff; }
.entrada-cartao .ec-risco { background: var(--acento); }
.entrada-cartao .botao.primario {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.entrada-cartao .botao.primario:hover {
  background: var(--acento-claro);
  border-color: var(--acento-claro);
}

/* ==========================================================================
   O CABECALHO DA TELA INICIAL — a logo e o cabecalho

   Vem depois de tudo porque ".p-topo" e ".logo-painel" aparecem em quatro
   lugares deste arquivo; reescrever aqui vence sem ter de cacar cada um.

   O que mudou: saiu o titulo "Hoje na fabrica" e a logo saiu do canto direito.
   Em 38px, encostada no botao Atualizar, a logo parecia um selo esquecido e o
   nome da empresa nao se lia. Agora ela e o cabecalho: altura de cabecalho, na
   esquerda, com o dia ao lado separado por um risco. Quem chega de manha ve a
   casa, depois a data, depois os numeros.
   ========================================================================== */

.p-topo {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 20px;
}

/* A logo saiu daqui e subiu para a barra: ver "A BARRA DE CIMA EM DUAS LINHAS",
   no fim deste arquivo. Sem ela, o dia nao precisa de risco nem de recuo —
   comeca na margem, como todo o resto da tela. */
.p-titulo { min-width: 0; }

/* "segunda-feira" nasce minusculo do diaPorExtenso; a maiuscula e so de
   apresentacao, para nao mexer no texto que outras telas tambem usam. */
.p-topo h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.15;
}
.p-topo h1::first-letter { text-transform: uppercase; }

.p-dia { margin: 4px 0 0; font-size: 12.5px; color: var(--g-fraco); }

/* O botao vai para a direita por conta propria: assim a ordem do HTML continua
   sendo a ordem de leitura. */
.p-topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Em tela estreita o risco vira linha quebrada: o dia desce para baixo da logo
   e a divisoria vertical deixaria de dividir coisa nenhuma. */
@media (max-width: 720px) {
  .p-topo { gap: 12px; }
  .p-topo-acoes { margin-left: auto; }
}

/* ==========================================================================
   A BARRA DE CIMA EM DUAS LINHAS — a casa primeiro, o trabalho depois

   Vem no fim do arquivo porque ".topo" e ".marca-bloco" ja sao escritos em
   tres lugares acima; aqui vence sem ter de mexer em cada um.

   A primeira coisa que o sistema mostrava era a palavra "Painel". O logo da
   empresa existia so dentro da tela inicial — nas outras oito nao havia sinal
   de quem era a casa. Agora a linha de cima e da empresa e a de baixo e das
   abas, que continuam horizontais, no mesmo lugar, uma linha abaixo.
   ========================================================================== */

.topo {
  display: block;
  height: auto;
  padding: 0;
}

.topo-linha {
  display: flex;
  align-items: center;
  padding: 0 var(--e4);
}

/* A linha da marca e mais alta que a das abas de proposito: e ela que da o
   primeiro palmo da tela, e logo apertado nao se le. */
.topo-marca { height: 64px; }

.topo-abas {
  height: 42px;
  border-top: 1px solid var(--borda);
}

/* O risco que separava marca de abas saiu: agora quem separa e a quebra de
   linha, e dois cortes no mesmo canto so sujariam. */
.marca-bloco {
  display: flex;
  align-items: center;
  flex: none;
  height: auto;
  padding: 0;
  margin: 0;
  border-right: 0;
  min-width: 0;
}

.marca-logo {
  height: 44px;
  max-height: 44px;
  max-width: 280px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* Sem logo cadastrada, o nome escrito ocupa o mesmo lugar e o mesmo peso. */
.marca-escrita {
  font-family: var(--fonte-tecnica);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--g-texto);
}

@media (max-width: 1200px) {
  /*
    Em tela estreita as abas saem do fluxo e viram gaveta pendurada no botao de
    menu. A linha delas ficaria como uma tira vazia de 42px debaixo da marca —
    por isso ela encolhe para nada, e a gaveta desce a altura da linha de cima.
  */
  .topo-abas { height: 0; border-top: 0; padding: 0; }
  .app:not(.menu-fechado) .menu-itens { top: 64px; }
  .app:not(.menu-fechado) .menu-itens { max-height: calc(100vh - 64px); }
  .marca-logo { height: 32px; max-height: 32px; max-width: 190px; }
  .marca-escrita { font-size: 17px; }
}

/* ---------- os botoes da janela, na linha da marca ----------

   A janela perdeu a moldura do Windows (ver MainWindow.xaml): estes sao OS
   botoes da janela, nao uma segunda via deles. No navegador nao existem.

   Ficam depois do nome de quem esta logado, encostados na ponta direita, que e
   onde a mao procura em qualquer programa. */

.janela-botoes {
  display: flex;
  gap: 2px;
  flex: none;
  margin-left: var(--e3);
  padding-left: var(--e3);
  border-left: 1px solid var(--borda);
}

.janela-botoes button {
  width: 34px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--texto-fraco);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.janela-botoes svg { width: 15px; height: 15px; }
.janela-botoes button:hover { background: var(--g-alto, #ffffff14); color: var(--texto); }

/* O fechar avisa que e o fechar antes do clique, nao depois. */
.janela-botoes button.fechar:hover { background: #b3261e; color: #fff; }

/* A linha de cima e a faixa de titulo: o cursor diz isso, e o texto nao pode
   ser selecionado sem querer no meio de um arrasto. */
.topo-marca { cursor: default; user-select: none; }
.topo-marca button, .topo-marca a, .topo-marca input { cursor: pointer; }

@media print { .janela-botoes { display: none !important; } }

/* ==========================================================================
   APERTO — o sistema tem de caber na janela

   Medido num notebook de 1366x768, com o painel quase vazio: a barra comia
   107px, o recuo do conteudo 72, o cabecalho do painel 67, e sobravam 661 para
   856 de conteudo. Dava 195px de rolagem numa tela que deveria caber inteira.

   O que mudou aqui e so altura. Nada de largura, nada de fonte: o que estava
   legivel continua legivel, o que se lia de longe continua se lendo de longe.
   ========================================================================== */

/* A linha da marca cede 12px, e o logo 8 — continua maior que os 38 que tinha
   quando vivia so na tela inicial. */
.topo-marca { height: 52px; }
.topo-abas { height: 38px; }
.marca-logo { height: 36px; max-height: 36px; max-width: 240px; }
.marca-escrita { font-size: 18px; }

/* O recuo do conteudo era de uma tela que nao tinha barra de duas linhas: 24 em
   cima mais 48 embaixo somavam quase um bloco inteiro de altura, em branco. */
.conteudo { padding: 14px 26px 28px; }

/* O cabecalho do painel: o risco ja separa, nao precisa de folga dos dois lados. */
.p-topo { padding-bottom: 12px; margin-bottom: 14px; }

/* A gaveta de tela estreita se pendura na altura da linha da marca — e ela
   acabou de mudar. */
@media (max-width: 1200px) {
  .app:not(.menu-fechado) .menu-itens { top: 52px; max-height: calc(100vh - 52px); }
  .marca-logo { height: 30px; max-height: 30px; max-width: 180px; }
}


/* ==========================================================================
   OS NÚMEROS DA ENTREGA — mesma linguagem da tela inicial

   Eram cinco lajes de 308px de largura por 80 de altura, cada uma com metade
   do espaco vazio a direita, esticadas de ponta a ponta da tela so porque eram
   cinco. O numero, em fonte de texto, nao alinhava com o de baixo.

   A tela inicial ja tinha resolvido isso: cartao que para onde o conteudo
   acaba, rotulo em caixa alta pequena, numero em fonte tecnica tabular. O que
   muda aqui e so adotar o mesmo — duas telas, um sistema.
   ========================================================================== */

.ent-numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 198px));
  justify-content: start;
  gap: 8px;
  margin-bottom: 8px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.ent-numeros > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: var(--g-base);
  border: 1px solid var(--borda);
  border-radius: var(--r2);
}

.ent-numeros .rot {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--g-fraco);
}

/* Fonte tecnica e tabular: os cinco numeros ficam na mesma grade vertical, e o
   "14" nao fica mais largo que o "4". */
.ent-numeros .num {
  font-family: var(--fonte-tecnica);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}

.ent-numeros .pe {
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--g-fraco);
}

/* ---------- a semana ----------
   Esta continua de ponta a ponta: e uma regua de dias, e regua que para no meio
   da tela deixa de ser regua. O que muda e a altura e o alinhamento dos
   numeros. */

.ent-semana { margin-bottom: 10px; }
.ent-semana button { padding: 6px 6px 7px; }
.ent-semana .d { font-size: 10px; letter-spacing: .5px; }
.ent-semana .n {
  font-family: var(--fonte-tecnica);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}
.ent-semana .kg { font-size: 10px; }

/* ==========================================================================
   OS BOTÕES NÃO FOGEM MAIS PARA BAIXO DA TELA

   Queixa, nestas palavras: "nao consigo salvar um pedido criado, nao consigo
   imprimir folha de expedicao". Os botoes existiam e funcionavam — estavam
   DEPOIS da lista, no fim de um painel que rola. Medido com trinta entregas
   num dia, numa tela de 1366x768: "Imprimir folha da expedicao" so aparecia
   depois de rolar 887 pixeis, passando a lista inteira. Quem nao sabia que
   tinha de rolar ate o fim concluia, com razao, que nao dava para imprimir.

   Agora a barra de acoes gruda no pe do painel: fica a vista o tempo todo, com
   a lista correndo por baixo dela. E a mesma solucao que a gaveta do pedido ja
   usava — ali o Salvar nunca sumiu, porque e rodape preso.
   ========================================================================== */

.painel-peca .acoes-form {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 16px;
  padding: 12px 0 2px;
  background: var(--g-base);

  /* O fio e a sombra curta dizem que ha conteudo correndo por baixo — sem eles
     a barra parece o fim da lista, e quem olha para de rolar. */
  border-top: 1px solid var(--borda);
  box-shadow: 0 -14px 18px -12px #0009;
}

/* O painel do dia tem recuo proprio; a barra se estica ate as bordas dele para
   nao deixar duas tiras do fundo aparecendo nos cantos. */
.painel-dia .acoes-form {
  margin-left: -18px;
  margin-right: -18px;
  padding: 12px 18px 4px;
  flex-wrap: wrap;
}

/* No papel ela nao existe — ja saia escondida, e sticky nao muda isso. */
@media print {
  .painel-peca .acoes-form { position: static; box-shadow: none; }
}

/* ---------- o aviso fica ACIMA de tudo ----------

   Ele nascia em z-index 50, e o escurecido que acompanha a gaveta do pedido
   esta em 70: o aviso aparecia POR BAIXO do veu. Quem clicava em "Salvar" sem
   ter escrito o material via o sistema recusar em silencio — a frase que
   explicava o porque estava na tela, atras de uma camada preta de 65%.

   1000 e acima de tudo o que este arquivo usa (o maior era 900). Aviso que nao
   se le e pior do que nenhum: manda a pessoa procurar defeito onde nao ha. */
.aviso-flutuante { z-index: 1000; }

/* ---------- a aba que abre as portas ----------

   Em tela larga o menu aparece ao passar o mouse. Quem usa DEDO numa tela larga
   — televisor da fabrica, monitor com toque — nao tem como passar o mouse: ali
   o clique na aba prende o menu aberto, e um clique fora solta.

   A aba em si deixou de abrir tela nenhuma: ela e a porta do menu, nao um
   destino. Era o contrario, e as opcoes viravam enfeite — a pessoa ja tinha
   entrado antes de escolher. */
.aba-com-menu.presa .aba-menu { display: flex; }

/* O cursor diz o que o clique faz: abre uma lista, nao vai para uma tela. */
.topo .servico[data-aba-menu] { cursor: default; }
.topo .servico[data-aba-menu]:hover { cursor: pointer; }

/* ==========================================================================
   A LETRA DO SISTEMA — Inter, embutida

   Ate aqui o sistema usava a fonte do Windows (Segoe UI). Funciona no PC da
   empresa e some no tablet Android, onde essa fonte nao existe: a mesma tela
   tinha duas caras conforme o aparelho. A fonte agora viaja DENTRO do sistema
   — 48 KB, dentro do .exe e dentro do servidor —, entao PC, tablet, celular e
   navegador desenham igual, inclusive sem internet.

   Nao e enfeite: numero de quilo com largura diferente de um aparelho para o
   outro desalinha coluna, e coluna desalinhada se le errado.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  /* O caminho e relativo a ESTE arquivo (/css/estilo.css), por isso o "../". */
  src: url("../fontes/inter.woff2") format("woff2");
  font-weight: 100 900;   /* arquivo variavel: um so para todos os pesos */
  font-style: normal;
  font-display: swap;
}

:root {
  --fonte-texto: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;

  /*
    A "tecnica" era Bahnschrift — a condensada do Windows, que nao existe em
    aparelho nenhum fora dele. Virou a mesma Inter: os numeros dela ja sao de
    largura fixa quando se pede "tabular-nums", que e o que faz as colunas de
    quilo ficarem alinhadas uma embaixo da outra.
  */
  --fonte-tecnica: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}

body { font-family: var(--fonte-texto); }

/* Todo numero do sistema em largura fixa: 1.111 e 8.888 ocupam o mesmo espaco. */
.p-tira-num, .ent-numeros .num, .ent-semana .n, .pd-kg, .cd-num b,
.tabela-lista .num, .tabela-obras .num, .quadro-resumo b, .mk-num {
  font-variant-numeric: tabular-nums;
}

/* ---------- os rotulos param de gritar ----------

   Caixa alta com letra espaçada era a marca industrial do sistema: "SAI HOJE",
   "EM CARTEIRA", "CLIENTE". Em tela, isso envelhece rapido e cansa — e foi a
   primeira coisa apontada. Vira caixa normal, no mesmo tamanho.

   Lista escolhida a dedo, e nao uma regra geral: selo pequeno continua em caixa
   alta (ali ele e sinal, nao texto), e NADA do que vai para o papel entra aqui
   — a ficha de producao e a folha da expedicao ficam como estao, porque as duas
   paginam medindo a altura da linha. */
.p-tira-rot,
.p-placa-rot,
.ent-numeros .rot,
.ent-semana .d,
.pd-rotulo,
.cd-num-rot,
.ob-numeros small,
.grade-campos label,
.gp-bloco label,
.gp-bloco > h4,
.filtro-dia label,
.filtro-dia span,
.painel-peca .fixos dt,
.tabela-lista th,
.rotulo-endereco,
.resumo-etapa h3,
.juntar-titulo,
.titulo-secao {
  text-transform: none;
  letter-spacing: .005em;
}

/* Rotulo nao precisa de negrito para ser rotulo: o lugar dele ja diz isso. */
.p-tira-rot, .ent-numeros .rot, .pd-rotulo, .cd-num-rot, .gp-bloco > h4 { font-weight: 400; }

/* ==========================================================================
   A TELA INICIAL — quatro números, a curva e a lista

   Desenho escolhido entre nove propostas. O que ele tira: caixa alta espaçada,
   cor forte em tudo, número em fonte de máquina de escrever e bloco com
   explicação no lugar de dado. O que ele põe: peso de letra leve, muito ar, e
   cor só onde existe problema.
   ========================================================================== */

.pn-numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}

.pn-num {
  padding: 20px 22px;
  border: 1px solid var(--risco);
  border-radius: 14px;
  background: var(--grafite-2);
}
.pn-num.clicavel { cursor: pointer; transition: border-color var(--rapido); }
.pn-num.clicavel:hover { border-color: var(--acento); }

.pn-rot { display: block; font-size: 12.5px; color: var(--g-fraco); }

/* Peso 300: o número é grande por tamanho, não por grossura. Negrito em corpo
   grande é o que dava ar de cartaz. */
.pn-v {
  display: block;
  margin: 10px 0 6px;
  font-size: 34px;
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--g-texto);
  font-variant-numeric: tabular-nums;
}
.pn-v small { font-size: 14px; font-weight: 400; color: var(--g-fraco); margin-left: 4px; }
.pn-v.ruim { color: var(--erro); }

.pn-pe { display: block; font-size: 12.5px; color: var(--g-fraco); }
.pn-pe b { font-weight: 500; }
.pn-pe .sobe { color: var(--ok); }
.pn-pe .desce { color: var(--erro); }

/* ---------- as duas colunas ---------- */

.pn-duas { display: grid; grid-template-columns: 1.35fr .65fr; gap: 14px; margin-bottom: 14px; }
.pn-lado { display: grid; gap: 14px; align-content: start; }
.pn-duas > .p-cartao h2 { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }

/* ---------- a curva ---------- */

.pn-curva svg { width: 100%; height: 150px; display: block; }
.pn-eixo { stroke: var(--risco); stroke-width: 1; }
.pn-linha { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
            vector-effect: non-scaling-stroke; }
.pn-ponta { fill: var(--acento); }
.pn-eixo-x { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--g-fraco); margin-top: 2px; }

/* ---------- a lista do que precisa de decisão ---------- */

.pn-lista { margin-top: 2px; }

.pn-l {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--risco);
  font-size: 13.5px;
  color: var(--g-medio);
  cursor: pointer;
}
.pn-l:last-child { border-bottom: 0; }
.pn-l:hover .pn-nome { color: var(--acento-claro, var(--acento)); }

/* O ponto diz a urgência sem tarja colorida ocupando meia linha. */
.pn-pino { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--g-fraco); }
.pn-l.ruim .pn-pino { background: var(--erro); }
.pn-l.perto .pn-pino { background: var(--alerta); }
.pn-l.sem-dia .pn-pino { background: transparent; box-shadow: inset 0 0 0 1.5px var(--g-fraco); }

.pn-nome { font-weight: 500; color: var(--g-texto); white-space: nowrap; }
.pn-que { color: var(--g-fraco); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-quando { margin-left: auto; font-size: 12.5px; color: var(--g-fraco); white-space: nowrap; }
.pn-l.ruim .pn-quando { color: var(--erro); }
.pn-kg { width: 92px; text-align: right; color: var(--g-texto); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 1100px) {
  .pn-numeros { grid-template-columns: repeat(2, 1fr); }
  .pn-duas { grid-template-columns: 1fr; }
  .pn-que { display: none; }
}

/* ---------- os títulos de bloco também param de gritar ----------

   A pele industrial põe caixa alta e 1,2px de espaço entre letras em todo
   título de bloco — era a maior fonte da "cara de armador". Aqui ele volta a
   ser uma frase normal, num corpo que se lê.

   Dentro de "@media screen" de propósito: o que vai para o PAPEL não muda. A
   ficha de produção pagina medindo a altura das linhas, e mexer na letra dela
   de carona mudaria a conta das folhas. */
@media screen {
  :root[data-pele^="industrial"] .barra-ferramentas .titulo-secao,
  :root[data-pele^="industrial"] .cabecalho-bloco h2,
  :root[data-pele^="industrial"] .folha > h2,
  :root[data-pele^="industrial"] .coluna-kanban h3,
  :root[data-pele^="industrial"] .cr-topo b,
  :root[data-pele^="industrial"] .tabela-lista thead th,
  .folha h2,
  .p-cartao h2,
  .cabecalho-bloco h2 {
    text-transform: none;
    letter-spacing: -.005em;
  }

  .folha h2, .p-cartao h2, .cabecalho-bloco h2 {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--g-texto);
  }

  :root[data-pele^="industrial"] .coluna-kanban h3 { font-size: 13.5px; font-weight: 500; }
  :root[data-pele^="industrial"] .tabela-lista thead th { font-size: 12px; font-weight: 500; }
}

/* ==========================================================================
   O ESCURO DEIXA DE SER PRETO

   Era #141414 — preto neutro puro, que de perto parece buraco e faz cada
   cartao flutuar sozinho. Agora é grafite: o mesmo cinza neutro, um degrau
   acima. Escolhido comparando as quatro famílias lado a lado, no painel de
   verdade.

   Subiram TODOS os degraus juntos, e não só o fundo: clarear o fundo e deixar
   as superfícies pretas faria os cartões sumirem dentro dele. A distância entre
   um degrau e o seguinte é o que desenha a tela.
   ========================================================================== */

:root {
  --g-fundo:   #1e1f22;   /* o mais fundo, atras de tudo */
  --g-base:    #26282c;   /* superficie padrao: listas, folhas, barras */
  --g-alto:    #2f3237;   /* elevado: cartoes, campos, hover */
  --g-alto-2:  #3a3e44;   /* mais elevado ainda: menus, paineis */
  --g-risco:   #3c4046;   /* divisoes e contornos */
  --g-risco-2: #4a4f57;   /* contorno em foco/hover */

  /* O texto clareia junto: cinza de 0,87 sobre #1e1f22 le melhor do que o
     branco quase puro que o preto pedia. */
  --g-texto:   #eceef1;
  --g-medio:   #c0c4c9;
  --g-fraco:   #9aa0a8;
}

/* ==========================================================================
   O CLARO VIRA PAPEL

   Era branco azulado (#eef1f4). Agora é um branco quente, levemente creme —
   escolhido lado a lado com outras três famílias, no painel de verdade. Ele
   acompanha o âmbar da marca e cansa menos a vista numa sala clara, que é
   onde o escritório trabalha.

   CONFERIDO, e não só escolhido no olho: o texto fraco dá 5,2 contra o fundo
   e 5,0 contra o campo — acima do mínimo de 4,5 que a letra pequena pede. O
   azul do acento ficou em 4,47 sobre o campo creme, um fio ABAIXO; por isso
   ele escureceu meio tom, para 4,9. Letra que "quase" se lê é letra que alguém
   vai ler errado.
   ========================================================================== */

:root[data-tema="claro"] {
  --g-fundo:   #f6f5f2;   /* o mais fundo */
  --g-base:    #ffffff;   /* superficie padrao */
  --g-alto:    #f2f0ec;   /* elevado: campos, hover */
  --g-alto-2:  #eae7e1;   /* menus e itens ativos */
  --g-risco:   #e0ddd6;
  --g-risco-2: #cbc7bd;

  --g-texto:   #23211d;
  --g-medio:   #514d46;
  --g-fraco:   #6b665d;

  --acento:       #1b68bd;
  --acento-claro: #14549b;
  --acento-veu:   #1b68bd1f;
  --acento-fundo: #e3edf8;
}

/* ==========================================================================
   A FOLHA DE IMPRESSÃO NÃO APARECE NA TELA

   O quadro mostra a ficha detalhada; a folha nova, a de imprimir, era para
   existir só no papel. Ela voltou a aparecer na tela por uma disputa boba de
   ordem: a mesma caixa tem as duas classes — "so-papel folhas-producao" — e
   enquanto ".so-papel" diz "display: none" lá em cima, ".folhas-producao" diz
   "display: flex" oitocentas linhas abaixo. Empatados em peso, vence a de
   baixo, e a folha reaparecia embaixo da ficha.

   Aqui o "none" é dito por último e com peso, e a impressão devolve o "flex"
   depois dele — nessa ordem, senão a folha sai em branco no papel.
   ========================================================================== */

.so-papel { display: none !important; }

@media print {
  .so-tela { display: none !important; }
  .so-papel { display: block !important; }

  /* A pilha de folhas é coluna centrada: se ficar em "block", as folhas saem
     encostadas na margem esquerda. Esta linha vem DEPOIS da de cima de
     propósito — as duas são "!important" e a última é que vale. */
  .so-papel.folhas-producao { display: flex !important; }
}

/* ==========================================================================
   OS BOTÕES DA JANELA SAEM DA BARRA E GRUDAM NA JANELA

   Eles moravam dentro da barra de cima — e a barra não existe na tela de
   ENTRADA, nem na troca de senha, nem na faixa de atualização. Com a janela
   também sem a moldura do Windows, quem parava no login ficava sem nenhuma
   forma de fechar ou minimizar o programa.

   Agora são do programa: canto de cima à direita, em todas as telas, antes e
   depois de entrar. O "no-programa" no documento só existe no aplicativo
   instalado — no navegador eles não aparecem e nada é reservado.
   ========================================================================== */

.janela-botoes {
  position: fixed;
  top: 11px;
  right: 18px;
  z-index: 900;          /* acima da barra, dos painéis e da gaveta */
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* A barra devolve o canto: sem isto o nome de quem está logado fica por baixo
   dos botões. 128px = três botões de 34 e as folgas. */
html.no-programa .topo-marca { padding-right: calc(var(--e4) + 128px); }

/* Fora do programa instalado não há botão nenhum para mostrar. */
html:not(.no-programa) .janela-botoes { display: none; }

/* ==========================================================================
   PELE TÉCNICA — azul-petróleo, dado em letra de máquina

   Nasceu de uma referência trazida pelo Rafael. Não é um sistema novo: é o tema
   ESCURO com outra régua de cor e de acabamento por cima — assim herda as
   cinquenta correções de cor que o escuro já carrega.

   O que a define, nesta ordem de importância:
     1. fundo azul-petróleo quase preto, painéis um tom acima, fio de contorno
     2. TODO dado em letra de máquina, com os rótulos em caixa alta pequena
     3. um acento só, azul-aço, na ação principal; a cor forte fica reservada
        para atrasado, prazo e em ordem
     4. cantos menos arredondados: ar de instrumento, não de aplicativo

   Ela é escolhida no mesmo seletor do sol e da lua, e fica guardada na conta.
   ========================================================================== */

:root[data-pele="tecnica"] {
  --g-fundo:   #080d12;
  --g-base:    #0e161d;
  --g-alto:    #17242e;
  --g-alto-2:  #1d2b36;
  --g-risco:   #1d2b36;
  --g-risco-2: #273744;

  --g-texto:   #dde7ee;
  --g-medio:   #9fb0bd;
  --g-fraco:   #6f8494;

  /*
    O ACENTO E AZUL-ACO, e nao o laranja da referencia.

    O laranja cheio puxava a vista para TUDO que fosse botao ou linha acesa, e
    numa tela com trinta cargas isso vira festa. Azul de aco e neutro: some
    quando nao e preciso e aparece quando e. O vermelho, o ambar e o verde ficam
    livres para dizer o que dizem — atrasado, perto do prazo, em ordem — sem
    disputar com a cor da ferramenta.
  */
  --acento:       #6ba4e0;
  --acento-claro: #8fbcea;
  --acento-veu:   #6ba4e026;
  --acento-fundo: #152635;

  --ok:     #2ec27e;
  --alerta: #e8b23a;
  --erro:   #e5584a;

  --borda:       #1d2b36;
  --borda-forte: #273744;
  --risco:       #1d2b36;
  --grafite:     #080d12;
  --grafite-2:   #0e161d;

  /* A letra de máquina é a assinatura desta pele: todo número e todo rótulo
     passam por ela. O texto corrido continua na Inter. */
  --fonte-tecnica: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas,
                   "Courier New", monospace;

  --r1: 5px; --r2: 7px; --r3: 9px;
}

/* ---------- o que vira letra de máquina ---------- */

:root[data-pele^="tecnica"] .pn-v,
:root[data-pele^="tecnica"] .pn-kg,
:root[data-pele^="tecnica"] .pn-quando,
:root[data-pele^="tecnica"] .ent-numeros .num,
:root[data-pele^="tecnica"] .ent-semana .n,
:root[data-pele^="tecnica"] .ent-semana .kg,
:root[data-pele^="tecnica"] .pd-kg,
:root[data-pele^="tecnica"] .cd-num b,
:root[data-pele^="tecnica"] .quadro-resumo b,
:root[data-pele^="tecnica"] .tabela-lista td,
:root[data-pele^="tecnica"] .tabela-obras td {
  font-family: var(--fonte-tecnica);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* Os rótulos voltam à caixa alta pequena — aqui ela é a linguagem, e não o
   enfeite industrial que saiu das outras peles. */
@media screen {
  :root[data-pele^="tecnica"] .pn-rot,
  :root[data-pele^="tecnica"] .pn-pe,
  :root[data-pele^="tecnica"] .ent-numeros .rot,
  :root[data-pele^="tecnica"] .ent-semana .d,
  :root[data-pele^="tecnica"] .pd-rotulo,
  :root[data-pele^="tecnica"] .cd-num-rot,
  :root[data-pele^="tecnica"] .tabela-lista thead th,
  :root[data-pele^="tecnica"] .p-cartao h2,
  :root[data-pele^="tecnica"] .folha h2,
  :root[data-pele^="tecnica"] .cabecalho-bloco h2,
  :root[data-pele^="tecnica"] .barra-ferramentas .titulo-secao,
  :root[data-pele^="tecnica"] .coluna-kanban h3 {
    font-family: var(--fonte-tecnica);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  /* O título de bloco é rótulo, mas não tão miúdo quanto um rótulo de campo. */
  :root[data-pele^="tecnica"] .p-cartao h2,
  :root[data-pele^="tecnica"] .folha h2,
  :root[data-pele^="tecnica"] .cabecalho-bloco h2,
  :root[data-pele^="tecnica"] .barra-ferramentas .titulo-secao {
    font-size: 12px;
    color: var(--g-texto);
  }
}

/* ---------- acabamento ---------- */

/* Contorno em vez de sombra: instrumento não tem sombra. */
:root[data-pele^="tecnica"] .p-cartao,
:root[data-pele^="tecnica"] .folha,
:root[data-pele^="tecnica"] .pn-num,
:root[data-pele^="tecnica"] .ent-numeros > div,
:root[data-pele^="tecnica"] .cartao-entrega {
  box-shadow: none;
  border: 1px solid var(--borda);
}

/* A ação principal é a única coisa com o acento cheio na tela. */
:root[data-pele^="tecnica"] .botao.primario {
  background: var(--acento);
  border-color: var(--acento);
  color: #190800;
  font-weight: 600;
}
:root[data-pele^="tecnica"] .botao.primario:hover { background: var(--acento-claro); }

/* A barra de cima e a de abas ficam do tom do painel, com o fio marcado. */
:root[data-pele^="tecnica"] .topo { background: var(--g-base); border-bottom-color: var(--borda); }
:root[data-pele^="tecnica"] .topo-abas { border-top-color: var(--borda); }
:root[data-pele^="tecnica"] .topo .servico.ativo::before { background: var(--acento); }

/* O painel inteiro é o fundo mais escuro; os blocos, um tom acima. */
:root[data-pele^="tecnica"] .painel-escuro { background: var(--g-fundo); }
:root[data-pele^="tecnica"] .p-cartao { background: var(--g-base); }

/* A curva do painel na cor da ação. */
:root[data-pele^="tecnica"] .pn-linha { stroke: var(--acento); }
:root[data-pele^="tecnica"] .pn-ponta { fill: var(--acento); }

/* ==========================================================================
   PELE TÉCNICA CLARA — a mesma linguagem, com a luz acesa

   A escura é azul-petróleo; esta é o papel técnico: branco frio levemente
   azulado, fio de contorno em vez de sombra, dado em letra de máquina e o
   mesmo azul-aço na ação — só que mais escuro, porque azul claro sobre
   branco não se lê.

   CONFERIDO: o acento dá 6,2 sobre o fundo e 7,0 sobre o cartão; o texto
   fraco, 4,53 e 5,13 — todos acima do mínimo de 4,5 da letra pequena.
   ========================================================================== */

:root[data-pele="tecnica-clara"] {
  --g-fundo:   #eef1f5;
  --g-base:    #ffffff;
  --g-alto:    #f5f7fa;
  --g-alto-2:  #e7ecf2;
  --g-risco:   #d8dfe7;
  --g-risco-2: #bfcad6;

  --g-texto:   #0d1820;
  --g-medio:   #40505e;
  --g-fraco:   #5d7080;

  /* O mesmo azul, escurecido para a luz acesa: 6,2 de contraste sobre o fundo
     e 7,0 sobre o cartao, com folga sobre o minimo de 4,5. */
  --acento:       #1f5a9c;
  --acento-claro: #16447a;
  --acento-veu:   #1f5a9c1f;
  --acento-fundo: #dfe9f5;

  --ok:     #11704a;
  --alerta: #8a5d0b;
  --erro:   #b63225;

  --borda:       #d8dfe7;
  --borda-forte: #bfcad6;
  --risco:       #d8dfe7;
  --grafite:     #eef1f5;
  --grafite-2:   #ffffff;

  --fonte-tecnica: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas,
                   "Courier New", monospace;

  --r1: 5px; --r2: 7px; --r3: 9px;
}

/* No claro o botão principal leva letra branca: 7,0 de contraste. */
:root[data-pele="tecnica-clara"] .botao.primario { color: #fff; }

/* Fio de contorno, nunca sombra: é o que dá o ar de instrumento também no claro. */
:root[data-pele="tecnica-clara"] .p-cartao,
:root[data-pele="tecnica-clara"] .folha,
:root[data-pele="tecnica-clara"] .pn-num,
:root[data-pele="tecnica-clara"] .ent-numeros > div,
:root[data-pele="tecnica-clara"] .cartao-entrega,
:root[data-pele="tecnica-clara"] .painel-peca,
:root[data-pele="tecnica-clara"] .gaveta-pedido { box-shadow: none; }


/* ---------- a pele técnica nas outras abas ----------

   Ela tinha nascido olhando para a tela inicial e para as entregas. Produção e
   Clientes continuavam com a cara antiga por dentro: número em fonte de texto,
   título de coluna em caixa alta espaçada, cartão com sombra.

   Aqui não há desenho novo — é a MESMA regra das outras telas aplicada onde
   faltava: dado em letra de máquina, rótulo em caixa alta pequena, contorno em
   vez de sombra. */

@media screen {
  /* ----- Produção: o quadro ----- */

  :root[data-pele^="tecnica"] .coluna-kanban .contagem,
  :root[data-pele^="tecnica"] .coluna-kanban .peso-coluna,
  :root[data-pele^="tecnica"] .cartao-kanban .peso,
  :root[data-pele^="tecnica"] .cartao-kanban footer,
  :root[data-pele^="tecnica"] .ck-juntos,
  :root[data-pele^="tecnica"] .quadro-resumo {
    font-family: var(--fonte-tecnica);
    font-variant-numeric: tabular-nums;
  }

  :root[data-pele^="tecnica"] .coluna-kanban .contagem {
    font-size: 11px;
    letter-spacing: .04em;
  }

  /* O cartão da bancada é o que mais se olha no dia: contorno marcado, sem
     sombra, e a faixa colorida da esquerda continua dizendo a etapa. */
  :root[data-pele^="tecnica"] .cartao-kanban {
    box-shadow: none;
    border: 1px solid var(--borda);
    border-left-width: 3px;
    border-radius: var(--r1);
  }
  :root[data-pele^="tecnica"] .cartao-kanban .obra {
    font-family: var(--fonte-tecnica);
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  /* A equipe que está com a ficha, como selo de instrumento. */
  :root[data-pele^="tecnica"] .ck-mao {
    font-family: var(--fonte-tecnica);
    font-size: 10.5px;
    letter-spacing: .04em;
    border-radius: var(--r1);
  }

  /* ----- Clientes: a relação e a ficha ----- */

  :root[data-pele^="tecnica"] .tabela-clientes td,
  :root[data-pele^="tecnica"] .tabela-obras td,
  :root[data-pele^="tecnica"] .cd-num b,
  :root[data-pele^="tecnica"] .to-entregue {
    font-family: var(--fonte-tecnica);
    font-variant-numeric: tabular-nums;
  }

  /* O nome do cliente continua em texto: é nome de gente, não medida. */
  :root[data-pele^="tecnica"] .tabela-clientes td.nome,
  :root[data-pele^="tecnica"] .tabela-clientes td b,
  :root[data-pele^="tecnica"] .tabela-obras td b {
    font-family: var(--fonte-texto);
  }

  :root[data-pele^="tecnica"] .tabela-clientes thead th,
  :root[data-pele^="tecnica"] .tabela-obras thead th,
  :root[data-pele^="tecnica"] .cd-num-rot {
    font-family: var(--fonte-tecnica);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--g-fraco);
  }

  :root[data-pele^="tecnica"] .cd-cabeca,
  :root[data-pele^="tecnica"] .cd-num,
  :root[data-pele^="tecnica"] .painel-peca,
  :root[data-pele^="tecnica"] .gaveta-pedido {
    box-shadow: none;
    border-color: var(--borda);
  }

  /* A inicial do cliente deixa de ser bolha colorida e vira placa quadrada —
     mesma linguagem das etiquetas de bitola. */
  :root[data-pele^="tecnica"] .cd-cabeca .cc-marca {
    border-radius: var(--r1);
    font-family: var(--fonte-tecnica);
    font-weight: 600;
  }
}

/* ---------- o símbolo de cada aba volta à barra ----------

   Eles sempre existiram — desenhados à mão, sem arquivo de ícone — e apareciam
   na gaveta de tela estreita. Na barra estavam escondidos desde que as abas
   deixaram de ser coluna e viraram faixa: naquele desenho o nome bastava.

   Com a pele técnica a conta mudou. O símbolo é o que faz a barra ser lida de
   relance, de longe e no meio do barulho — e é também o que diferencia as abas
   quando a aba acesa não tem mais fundo colorido, só um risco embaixo.

   Miúdo e sem caixa: 16px, do tom do texto, colado no nome. Ícone com moldura
   viraria um botão dentro do botão. */
.topo .servico .icone {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-right: 7px;
  border-radius: 0;
  background: none;
  color: inherit;
  opacity: .72;
}
.topo .servico .icone svg { width: 16px; height: 16px; stroke-width: 1.7; }

/* Na aba acesa e sob o mouse o símbolo acende junto com o nome. */
.topo .servico.ativo .icone,
.topo .servico:hover .icone { opacity: 1; }

/* A seta do menu continua colada no nome, e não no símbolo. */
.topo .servico .aba-seta { margin-left: 6px; }

/* Em tela estreita nada disto vale: lá as abas já são linhas da gaveta, com o
   símbolo no tamanho de lista. */
@media (max-width: 1200px) {
  .topo .servico .icone { width: 20px; height: 20px; margin-right: 10px; opacity: 1; }
}

/* ==========================================================================
   A TELA DE ENTRADA SEGUE O TEMA DO SISTEMA

   Ela nasceu antes dos temas e trouxe a própria paleta cravada no topo do
   bloco ".entrada": grafite, risco, texto, tudo em hexadecimal. O resultado é
   que ela ficava SEMPRE no mesmo cinza — a pessoa escolhia a aparência clara,
   entrava, e no dia seguinte abria o sistema numa tela escura que não era mais
   a dele. Mesma coisa com a pele técnica: todo o sistema mudou de cara, e a
   porta de entrada continuou com a antiga.

   Aqui as variáveis locais dela passam a APONTAR para as do tema. Nada no
   desenho muda — o que muda é de onde vem a cor.
   ========================================================================== */

.entrada {
  --grafite:   var(--g-fundo);
  --grafite-2: var(--g-base);
  --grafite-3: var(--g-alto);
  --risco:     var(--g-risco);
  --texto:     var(--g-texto);
  --texto-fraco: var(--g-fraco);
  --aco:       var(--g-medio);
}

/* A sigla no alto do cartão: a letra sobre o acento precisa contrastar com ELE,
   e o acento mudou de âmbar para azul-aço. Letra branca dá 6,1; a marrom que
   estava cravada daria 2,7 — ilegível. */
.ec-marca .entrada-sigla { color: #fff; }

/* No tema claro o cartão precisa de contorno: sem ele, branco sobre branco
   vira uma mancha sem forma. */
:root[data-tema="claro"] .entrada-cartao {
  border: 1px solid var(--g-risco);
  box-shadow: 0 10px 40px #0000000f;
}

/* ---------- a entrada na pele técnica ---------- */

@media screen {
  /* Rótulo de campo em caixa alta pequena e letra de máquina, como no resto do
     sistema. O nome do produto também: é placa de equipamento, não título. */
  :root[data-pele^="tecnica"] .entrada-caixa label,
  :root[data-pele^="tecnica"] .ec-marca h1,
  :root[data-pele^="tecnica"] .entrada-estado,
  :root[data-pele^="tecnica"] .ec-claude {
    font-family: var(--fonte-tecnica);
    letter-spacing: .09em;
  }

  :root[data-pele^="tecnica"] .ec-marca h1 { font-size: 18px; font-weight: 600; }
  :root[data-pele^="tecnica"] .entrada-estado { font-size: 11.5px; }

  /* Instrumento não tem canto redondo nem sombra grande. */
  :root[data-pele^="tecnica"] .entrada-cartao {
    border-radius: var(--r3);
    border: 1px solid var(--g-risco);
    box-shadow: none;
  }
  :root[data-pele^="tecnica"] .ec-marca .entrada-sigla { border-radius: var(--r1); }
}

/* ---------- o Salvar no alto da gaveta ----------

   Ele existe porque o rodapé pode sair da vista: a janela não tem mais moldura
   do Windows e pode ser arrastada para além da borda de baixo do monitor, e
   junto com o pé do programa vai o botão principal.

   Discreto de propósito — o do rodapé continua sendo o caminho normal, este é
   a garantia. Por isso ele é menor e fica antes do ✕, nunca no lugar dele. */
.gp-salvar-topo {
  margin-left: auto;
  height: 30px;
  min-height: 30px;
  padding: 0 14px;
  font-size: 12.5px;
  flex: none;
}

/* O ✕ deixa de puxar a margem: quem empurra agora é o Salvar. */
.gp-topo .botao-icone { margin-left: var(--e2); }

/* ---------- lista grande: o cabeçalho do dia também fica preso ----------

   A barra de ações já estava presa no pé. Faltava o outro lado: com quinze,
   vinte entregas no mesmo dia, o título e a contagem rolavam para fora e quem
   estava no meio da lista perdia a referência — qual dia é este, quantas são,
   quantos quilos.

   Agora as duas pontas ficam: o dia em cima, as ações embaixo, e só a lista
   corre no meio. O fio embaixo do cabeçalho aparece para dizer que há
   conteúdo passando por baixo. */

.painel-dia > h2 {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0 -18px;
  padding: 0 18px 2px;
  background: var(--g-base);
}

.painel-dia > .dica {
  position: sticky;
  top: 26px;
  z-index: 4;
  margin: 0 -18px 6px;
  padding: 0 18px 10px;
  background: var(--g-base);
  border-bottom: 1px solid var(--borda);
}

/* ---------- quadro: as quatro colunas cabem mesmo com o sistema aumentado ----

   A coluna pede 290px. Em tela larga isso é o certo — já houve um teto de 310px
   que espremia o cartão e cortava nome de cliente, e o remédio foi pior que a
   doença. Mas com o TAMANHO da tela em 120% ou 130%, a janela passa a valer o
   equivalente a 1100 ou 1050 pixels, e a quarta coluna — "Pronto para Entrega",
   justamente a que libera a entrega — sai da vista.

   Aqui as colunas cedem até 245px, e só quando a tela aperta. Medido: as quatro
   cabem em 1028px, e nada dentro do cartão fica cortado nessa largura. Em tela
   larga continua tudo como estava. */

@media (max-width: 1200px) {
  .quadro { grid-auto-columns: minmax(245px, 1fr); }
  .coluna-kanban { min-width: 230px; }
}

@media (max-width: 900px) {
  /* Abaixo disto não há desenho que salve quatro colunas lado a lado: aí sim
     elas rolam para o lado, que é melhor do que espremer até o ilegível. */
  .quadro { grid-auto-columns: minmax(225px, 1fr); }
}

/* ---------- a linha da marca cresce ----------

   Pedido: logo maior. Ela estava em 36px numa linha de 52 — resto do aperto
   que fizemos quando o sistema não cabia na tela. Agora vai a 48px numa linha
   de 68, que é o maior que ela chega sem a barra virar faixa de cartaz.

   Custa 16px de altura em todas as telas. Hoje isso é barato: quem precisar do
   espaço de volta usa o "Tamanho" no menu do nome — em 90% a barra inteira
   volta a ocupar menos do que ocupava antes deste aumento.

   A gaveta de tela estreita se pendura na altura desta linha: os três números
   (altura, "top" e o "calc" da altura máxima) andam sempre juntos. */

.topo-marca { height: 68px; }
.marca-logo { height: 48px; max-height: 48px; max-width: 300px; }
.marca-escrita { font-size: 22px; }

@media (max-width: 1200px) {
  .app:not(.menu-fechado) .menu-itens { top: 68px; max-height: calc(100vh - 68px); }
  .marca-logo { height: 38px; max-height: 38px; max-width: 220px; }
  .marca-escrita { font-size: 19px; }
}

/* ==========================================================================
   ENQUADRAMENTO — tudo na mesma prumada

   Duas heranças de quando cada tela era uma coluna centrada de 940px:

   1. A BARRA DE FERRAMENTAS continuava com teto de 940px e centralizada. Numa
      tela de 1440 ela ficava com 940 no meio e 224px de vazio de cada lado,
      enquanto o quadro, as listas e os cartões embaixo iam de ponta a ponta. O
      título da tela e os botões pareciam de outra página.

   2. A BARRA DE CIMA usava 16px de margem lateral e o conteúdo, 26px. O logo e
      as abas ficavam 10px à esquerda de tudo o que vem embaixo — pouco para
      apontar, o bastante para a tela parecer torta.

   Agora os três — logo, abas e conteúdo — começam na mesma linha vertical, e a
   barra de ferramentas acompanha a largura do que ela comanda.

   A folha da ficha e o bloco de auditoria CONTINUAM centrados em 940px: ali o
   centro é certo, porque os dois são papel, não tela.
   ========================================================================== */

.barra-ferramentas {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* O mesmo recuo do conteúdo (ver ".conteudo"), para as três coisas começarem
   no mesmo lugar. */
.topo-linha { padding: 0 26px; }

/* O canto reservado aos botões da janela acompanha o recuo novo. */
html.no-programa .topo-marca { padding-right: 154px; }

/* A tela inicial sangra até as bordas, e por isso tem recuo próprio. Ele era
   30px enquanto o resto do sistema passou a usar 26 — e o cabeçalho do painel
   ficava 4px à direita do logo e das abas. As margens negativas também vinham
   de um recuo de conteúdo antigo (22px em cima, 60 embaixo); agora batem com
   os 14 e 28 que o conteúdo usa hoje. */
.painel-escuro {
  margin: -14px -26px -28px;
  min-height: calc(100% + 42px);
  padding: 14px 26px 28px;
}

/* ==========================================================================
   NADA CORTADO — o que não cabe quebra, não some

   Duas sobras encontradas medindo a ficha do cliente com nome e endereço
   longos (que é o caso real: "Pilares — trecho Fundação → Cintas de amarração
   do bloco B"):

   1. A FILEIRA "Abrir · + Etapas · Excluir" passava 23px da coluna dela. Ela
      tinha "white-space: nowrap", que impede a quebra — então o último botão
      saía pela borda e ficava inalcançável.

   2. O NOME DA ENTREGA, no cartão da direita, era cortado com reticências. Ali
      a reticência esconde justamente o que distingue uma entrega da outra: o
      trecho. Agora ele quebra em duas linhas.

   A regra geral que fica: em tela, texto que não cabe QUEBRA; reticência só
   onde a altura da linha é fixa por desenho (uma tabela, por exemplo).
   ========================================================================== */

/* Só a quebra, e nada de flex: ".acoes-linha" é uma CÉLULA de tabela, e
   transformar célula em caixa flexível colapsa a largura dela — os três botões
   empilharam um debaixo do outro numa coluna de 14px. Tirando o "nowrap", eles
   passam para a linha de baixo quando não cabem, que é o que se queria. */
.acoes-linha { white-space: normal; }
.acoes-linha .botao-mini { margin: 2px 0 2px 5px; }

.cd-ent-nome {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}

/* A coluna das ações pedia 200px e os três botões — Abrir, + Etapas, Excluir —
   somam 216 com as folgas. Faltavam 16px, e o Excluir saía pela borda da
   célula. O espaço vem do nome da obra, que é a coluna elástica: ela encolhe
   16px e continua com folga. */
.tabela-obras col.to-acoes { width: 232px; }

/* ==========================================================================
   O CANTO DOS BOTÕES DA JANELA É RESERVADO

   Os botões de minimizar, tela cheia e fechar ficam presos no canto de cima à
   direita da JANELA — eles são do programa, não de uma tela. Qualquer coisa
   que também encoste nesse canto passa por baixo deles.

   Foi o que aconteceu com a gaveta do pedido: ela é colada na direita e vai do
   topo ao pé, então o "Salvar" do cabeçalho dela caiu embaixo do fechar da
   janela. Vale para os painéis laterais pelo mesmo motivo — o ✕ deles mora no
   mesmo lugar.

   A reserva só existe no programa instalado: no navegador não há botão de
   janela nenhum, e o recuo deixaria um buraco à toa.
   ========================================================================== */

html.no-programa .gp-topo { padding-right: 132px; }
html.no-programa .painel-peca > header { padding-right: 124px; }

/* A gaveta e o painel ocupam a altura toda; se a janela for estreita, a reserva
   come o cabeçalho inteiro. Aí o conteúdo desce uma linha em vez de sumir. */
@media (max-width: 560px) {
  html.no-programa .gp-topo,
  html.no-programa .painel-peca > header { padding-right: var(--e4); padding-top: 42px; }
}

/* ==========================================================================
   A BAIXA DA OBRA CONTA O QUE JÁ ESTÁ PRONTO
   --------------------------------------------------------------------------
   A barra virou dois pedaços na mesma régua: o que saiu (cheio) e o que está
   pronto no pátio esperando caminhão (claro, listrado). A obra não fica
   parada só porque a entrega foi marcada para o mês que vem.
   ========================================================================== */
.barra-entrega { display: flex; }
.barra-entrega i.be-saiu { background: var(--ok); }
.barra-entrega i.be-pronto {
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--ok) 42%, transparent) 0 3px,
    color-mix(in srgb, var(--ok) 20%, transparent) 3px 6px);
}
.entrega-patio {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--g-fraco);
  white-space: normal;
}

/* ==========================================================================
   A FOLHA DE PRODUÇÃO SÓ QUEBRA CERTO SE NADA ACIMA DELA ROLAR
   --------------------------------------------------------------------------
   Sintoma: a ficha saía da impressora com folha só de cabeçalho, folha
   começando no meio dos materiais, folha comida no pé. Na tela, a mesma ficha
   estava inteira.

   A causa não estava na folha — estava em cima dela. ".conteudo" é a área que
   rola na tela, e o bloco de impressão lá em cima já mandava
   "overflow: visible" nela. Só que MUITO depois, no arrastão do tema, voltou
   um ".conteudo { overflow-y: auto }" sem mídia nenhuma. Mesmo peso, e quem
   vem depois vence: na impressão ela continuava sendo uma caixa que rola.

   E caixa que rola o navegador não reparte. Ele trata o bloco inteiro como
   peça única, corta onde a folha de papel acabar e IGNORA o "break-after:
   page" de cada folha. Daí a quebra cair no meio do cabeçalho em umas, no meio
   das tiras em outras — sempre em lugar diferente, porque o lugar é onde o
   papel terminou, não onde a folha termina.

   Aqui as regras da impressão são ditas POR ÚLTIMO, que é a única forma de
   não serem desfeitas por um bloco novo colado no fim do arquivo. A pilha de
   folhas também volta a ser "block": ela só é flex para ficar centrada na
   tela, e no papel cada folha JÁ é a página inteira — não há o que centrar, e
   em flex o navegador reparte pior.
   ========================================================================== */

@media print {
  html, body { height: auto !important; overflow: visible !important; }

  .app, .corpo {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .conteudo {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 0 !important;
    height: auto !important;
  }

  .so-papel.folhas-producao {
    display: block !important;
    padding: 0 !important;
  }

  /* Uma folha, uma página. "break-inside" é o cinto de segurança: se um dia a
     página do papel ficar menor que a folha, ela vai inteira para a próxima em
     vez de ser cortada no meio. */
  .fp {
    margin: 0 auto !important;
    break-after: page;
    break-inside: avoid;
  }
  .fp:last-child { break-after: auto; }
}