/* Rótulo de matéria-prima (#/materias/rotulo/NR-...): public/js/rotulos.js + paginas/rotulos.js. Prefixo rot-.
   O rótulo é todo em milímetros (fica do tamanho real na tela e na impressão). As medidas de cada tamanho de etiqueta
   (margem --p, fontes --ft/--fn/--fi/--fnr/--fs, logo, barras --hb, círculo --d) vêm de medidasRotulo(); --k diminui
   as letras quando o nome é comprido (o código de barras não muda) e --kn, depois, só a do nome. Preto no branco:
   impressora térmica. */

/* ------------------------------------------------------------ barra de impressão e opções (só na tela) */
.rot-barra { flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: 12px 16px; }
.rot-barra .campo { margin: 0; }
.rot-barra .campo select, .rot-barra .campo input { min-height: 46px; }
.rot-barra .rot-mm input { width: 110px; }
.rot-barra .rot-girar { min-height: 46px; display: inline-flex; align-items: center; }
.rot-barra .botoes { margin-left: auto; }
.rot-aviso {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; margin: 0 0 14px;
  border-radius: var(--raio); background: var(--vermelho-claro); border: 1px solid #f3b9b9; color: #8a1c1c; font-weight: 600;
}
.rot-aviso-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rot-aviso svg { width: 22px; height: 22px; flex: 0 0 22px; }
.rot-aviso span { flex: 1 1 320px; }
.rot-resumo { margin: 0 0 14px; font-size: 15px; }
.rot-entradas .cartao-titulo { margin-bottom: 10px; }
.rot-entrada { padding: 12px 0; border-top: 1px solid var(--borda); }
.rot-entrada:first-of-type { border-top: 0; padding-top: 0; }
.rot-entrada-cab { font-size: 16px; margin-bottom: 8px; }
.rot-entrada-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.rot-entrada-linha .campo { margin: 0; }
.rot-entrada-linha .rot-num { width: 90px; min-height: 42px; text-align: right; }
.rot-entrada-linha .checar { min-height: 42px; display: inline-flex; align-items: center; }
.rot-qtds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; font-size: 14px; }
.rot-qtd { display: inline-flex; align-items: center; gap: 6px; }
.rot-qtd input { width: 100px; min-height: 40px; text-align: right; }
.rot-soma { font-weight: 700; }
.rot-salvar { margin-top: 12px; align-items: center; }

/* ------------------------------------------------------------ prévia */
.rot-previa { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
/* a borda da etiqueta na tela é uma sombra (não ocupa espaço: o tamanho continua o real) */
.rot-previa.rot-modo-etiqueta .rot-etiqueta { box-shadow: 0 0 0 1px var(--borda-forte); }
/* etiqueta pequena: prévia ampliada só na tela (--zoom vem da página; a impressão é no tamanho real) */
@media screen { .rot-previa.rot-modo-etiqueta { zoom: var(--zoom, 1); } }
.rot-previa.rot-modo-a4 { display: block; overflow-x: auto; }

/* ------------------------------------------------------------ o rótulo */
.rot-etiqueta {
  --k: 1; --kn: 1;
  position: relative; display: grid; gap: var(--g); padding: var(--p); box-sizing: border-box; overflow: hidden;
  background: #fff; color: #000; font-family: Arial, "Segoe UI", Helvetica, sans-serif; line-height: 1.13;
  flex: 0 0 auto;
}
.rot-etiqueta.rot-deitada { grid-template-columns: minmax(0, 1fr) var(--cs); }
.rot-etiqueta.rot-empe { grid-template-rows: minmax(0, 1fr) auto; }
.rot-conteudo { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
/* o topo e o NR com o código de barras NUNCA encolhem nem são empurrados para fora: quem cede, se faltar altura, é o nome
   (até 1 linha, com "...") e depois as informações. A página (ajustarTextos) diminui as letras antes e avisa se não couber. */
.rot-topo { display: flex; align-items: center; gap: 1.5mm; flex-wrap: wrap; flex-shrink: 0; }
.rot-logo { display: block; height: var(--logo); width: auto; }
.rot-tipo {
  display: inline-block; background: #000; color: #fff; font-weight: 800; text-transform: uppercase;
  font-size: calc(var(--ft) * var(--k)); letter-spacing: .25mm; padding: .35mm 1.3mm; border-radius: .6mm; line-height: 1.15;
}
.rot-exemplo { font-size: calc(var(--ft) * var(--k)); font-weight: 800; text-transform: uppercase; border: .3mm solid #000; padding: .2mm 1mm; }
.rot-nome {
  font-size: calc(var(--fn) * var(--k) * var(--kn)); font-weight: 800; text-transform: uppercase; line-height: 1.08;
  margin-top: .9mm; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  flex-shrink: 100; min-height: calc(var(--fn) * var(--k) * var(--kn) * 1.08);
}
.rot-empe .rot-nome { -webkit-line-clamp: 4; }
.rot-info { font-size: calc(var(--fi) * var(--k)); margin-top: .8mm; flex-shrink: 1; min-height: 0; overflow: hidden; }
.rot-info > div { margin-top: .25mm; }
/* cada "Rótulo: valor" fica junto na linha; valor comprido (lote, NF) quebra dentro dele, nunca sai cortado à direita */
.rot-par { display: inline-block; max-width: 100%; vertical-align: top; overflow-wrap: anywhere; margin-right: 1.6mm; }
.rot-info b { font-weight: 800; }
.rot-vol { display: inline-block; white-space: nowrap; border: .3mm solid #000; padding: 0 .9mm; line-height: 1.15; margin-top: .35mm; }
/* NF e fornecedor: no máximo 2 linhas */
.rot-nf { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rot-forn { overflow-wrap: anywhere; }
.rot-barras { margin-top: auto; padding-top: .8mm; flex-shrink: 0; }
/* só enquanto a página mede se o texto cabe (ajustarTextos): 3% de folga na largura */
.rot-medindo .rot-conteudo { padding-right: 3%; }
.rot-svg { display: block; height: var(--hb); }
.rot-svg svg { display: block; width: 100%; height: 100%; }
.rot-nr { font-size: var(--fnr); font-weight: 800; letter-spacing: .35mm; line-height: 1.1; margin-top: .4mm; font-variant-numeric: tabular-nums; }
.rot-sem-barras { font-size: var(--fi); font-weight: 700; }
.rot-selo { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.rot-circulo { width: var(--d); height: var(--d); border: .3mm solid #000; border-radius: 50%; box-sizing: border-box; flex: 0 0 auto; }
.rot-selo-texto { font-size: var(--fs); margin-top: .6mm; text-align: center; line-height: 1.1; }

/* página de teste: moldura a 1 mm da borda e cruz no centro */
.rot-teste .rot-nome { text-transform: none; }
.rot-teste-moldura { position: absolute; inset: 1mm; border: .3mm solid #000; pointer-events: none; }
.rot-teste-cruz { position: absolute; left: 50%; top: 50%; width: 6mm; height: 6mm; margin: -3mm 0 0 -3mm; pointer-events: none;
  background: linear-gradient(#000, #000) center / .3mm 100% no-repeat, linear-gradient(#000, #000) center / 100% .3mm no-repeat; }

/* ------------------------------------------------------------ folha A4: 2 x 4 rótulos com linhas de corte */
.rot-folha {
  width: 210mm; height: 297mm; box-sizing: border-box; background: #fff; margin: 0 auto 24px; overflow: hidden;
  padding: 15mm 6mm 0; border: 1px solid var(--borda);
  display: grid; grid-template-columns: repeat(2, 99mm); grid-auto-rows: 67mm; justify-content: center; align-content: start;
}
.rot-folha .rot-etiqueta { border-right: .25mm dashed #777; border-bottom: .25mm dashed #777; }
.rot-folha .rot-etiqueta:nth-child(-n + 2) { border-top: .25mm dashed #777; }
.rot-folha .rot-etiqueta:nth-child(odd) { border-left: .25mm dashed #777; }

/* ------------------------------------------------------------ impressão */
@media print {
  .rot-pagina-tela .rot-previa { display: block; gap: 0; }
  .rot-previa.rot-modo-etiqueta .rot-etiqueta { box-shadow: none; break-after: page; page-break-after: always; }
  .rot-previa.rot-modo-etiqueta .rot-etiqueta:last-child { break-after: auto; page-break-after: auto; }
  .rot-folha { border: 0; margin: 0; break-after: page; page-break-after: always; }
  .rot-folha:last-child { break-after: auto; page-break-after: auto; }
}

/* celular: a prévia rola de lado dentro dela (a página não) */
@media screen and (max-width: 860px) {
  .rot-previa { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .rot-barra .botoes { margin-left: 0; }
}