/* ============================================================================
   Folha de ETIQUETAS das páginas geradas. Aqui a unidade é o MILÍMETRO: o que
   está na tela precisa sair do mesmo tamanho no papel adesivo, senão a etiqueta
   não cola no lugar certo. Largura e altura chegam do descritor em custom
   properties (--etiqueta-largura / --etiqueta-altura), postas no style inline.
   Cor só por token (--m50ui-* com fallback --m50-*).
   ========================================================================== */

.site-etiquetas__aviso {
    margin: 0 0 var(--m50ui-sp-lg, 16px);
    padding: 8px 12px;
    border-left: 3px solid var(--m50ui-border, var(--m50-border-light));
    font-size: var(--m50ui-fs-xs, 12px);
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
}

/* Grade (e não flex-wrap) porque o gabarito manda: são as COLUNAS que fazem a etiqueta cair
   dentro do adesivo. Com wrap, uma etiqueta 1mm mais larga reflui a folha inteira e a tiragem
   sai deslocada. --etiqueta-colunas chega do descritor (gabarito Pimaco/Avery ou deduzido). */
.site-etiquetas__folha {
    display: grid;
    grid-template-columns: repeat(var(--etiqueta-colunas, 3), var(--etiqueta-largura, 63.5mm));
    align-content: flex-start;
    justify-content: center;
    gap: 2mm;
}

.site-etiqueta {
    box-sizing: border-box;
    width: var(--etiqueta-largura, 63.5mm);
    height: var(--etiqueta-altura, 38.1mm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1mm;
    padding: 2mm;
    overflow: hidden;
    text-align: center;
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    border: 1px solid var(--m50ui-border, var(--m50-border-light));
    border-radius: 1.5mm;
    color: var(--m50ui-on-surface, var(--m50-text-primary));
}

/* Etiqueta-modelo do editor: é ela que se edita, e mostra os {campos} literais. */
.site-etiqueta--modelo { border-style: dashed; border-color: var(--m50ui-accent-text, var(--m50-info)); }

.site-etiqueta__logo {
    max-width: 40%;
    max-height: 6mm;
    object-fit: contain;
}

.site-etiqueta__texto {
    display: flex;
    flex-direction: column;
    gap: 0.5mm;
    min-width: 0;
    width: 100%;
}

.site-etiqueta__titulo {
    margin: 0;
    font-size: 3.6mm;
    font-weight: var(--m50-font-weight-bold, 700);
    line-height: var(--m50-line-height-tight, 1.2);
    overflow: hidden;
    /* Duas linhas no máximo: o nome longo não pode empurrar o código de barras para fora. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.site-etiqueta__subtitulo {
    margin: 0;
    font-size: 2.8mm;
    line-height: var(--m50-line-height-tight, 1.2);
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.site-etiqueta__preco {
    font-size: 5mm;
    font-weight: var(--m50-font-weight-bold, 700);
    line-height: 1;
    color: var(--m50ui-accent-text, var(--m50-info));
}

.site-etiqueta__codigo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5mm;
    width: 100%;
    margin-top: auto;
}

/* QR na etiqueta: pequeno mas nunca menor que ~10mm — abaixo disso a câmera de celular não
   resolve os módulos numa impressão doméstica, e um QR ilegível é pior que nenhum. */
.site-etiqueta__qr {
    display: block;
    line-height: 0;
}

.site-etiqueta__qr .site-qr {
    width: 12mm;
    height: 12mm;
}

/* SVG do Codigo128 (herda a cor do texto via fill="currentColor"). O padrão só garante que
   ele nunca vaze do container; o esticar é decisão da etiqueta, não do componente. */
.site-barras {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Na etiqueta ocupa a largura toda: quanto mais largo o módulo, mais fácil de ler. O
   achatamento vertical do max-height é inofensivo — o leitor lê a largura das barras. */
.site-etiqueta__codigo .site-barras {
    width: 100%;
    max-height: 12mm;
}

.site-etiqueta__codigo-legivel {
    font-family: var(--m50ui-mono, monospace);
    font-size: 2.6mm;
    letter-spacing: 0.06em;
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
}

/* ─── Impressão ─────────────────────────────────────────────────────────── */

@media print {
    /* Aviso de prévia é coisa do editor; no papel só saem as etiquetas. */
    .site-etiquetas__aviso { display: none; }

    /* Dois seletores de classe para vencer o .site-sec--* de landing-v2.css sem !important. */
    .site-etiquetas.site-secao { padding-block: 0; }
    .site-etiquetas .site-container { max-width: none; padding-inline: 0; }

    .site-etiquetas__folha { gap: 0; }

    .site-etiqueta {
        break-inside: avoid;
        page-break-inside: avoid;
        border-color: transparent;
        border-radius: 0;
        background: none;
        /* Cortar pela guilhotina exige tinta previsível: sem sombra, sem fundo. */
        box-shadow: none;
    }

    .site-etiqueta--modelo { border-style: solid; }
}