/* dicode.ai — CSS só da página ZPL para PDF (/zpl-para-pdf). Leva 15, peça G.
   Tela: assets/js/ferramentas/telas/zpl-para-pdf.js; opções: templates/ferramentas/zpl-para-pdf.html
   e o campo de colar (zpl-para-pdf-escolher.html). Só os tokens do design system, cantos retos, sem
   sombra nem gradiente, linhas de 1px, alvos de toque de 44px. */

.zp { display: grid; gap: 24px; min-width: 0; }
.zp [hidden] { display: none; }

/* Colar o código (só na etapa de escolher) */
.zp-colar { margin-top: 16px; min-width: 0; }
.zp-colar > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none; }
.zp-colar > summary::-webkit-details-marker { display: none; }
.zp-colar-corpo { display: grid; gap: 8px; padding-top: 8px; min-width: 0; }
.zp-colar-texto { width: 100%; min-height: 140px; font-family: var(--fonte-mono); font-size: 14px; line-height: 1.45; resize: vertical; }
.zp-colar-corpo .botao { justify-self: start; min-height: 44px; }
.area:not([data-etapa="escolher"]) .zp-colar { display: none; }

/* Resumo */
.zp-resumo { display: grid; gap: 8px; min-width: 0; }
.zp-resumo:empty { display: none; }
.zp-resumo p { margin: 0; overflow-wrap: anywhere; }
.zp-resumo-principal { font-size: 18px; line-height: 1.35; }
.zp-lendo { color: var(--cinza); }
.zp-resumo-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.zp-resumo-lista li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.zp-resumo-lista li::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--laranja); transform: translateY(-1px); }

/* Prévia das etiquetas */
.zp-previa { display: grid; gap: 12px; min-width: 0; }
.zp-previa-titulo { margin: 0; }
.zp-etiquetas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 720px) { .zp-etiquetas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .zp-etiquetas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zp-etiqueta { display: grid; gap: 4px; min-width: 0; margin: 0; }
.zp-etiqueta-folha {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--linha);
  background: var(--superficie);
}
.zp-etiqueta-folha img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--branco); }
.zp-etiqueta figcaption { font-size: 13px; color: var(--cinza); font-family: var(--fonte-mono); }
.zp-previa > .botao { justify-self: start; min-height: 44px; }