/* Folha de identificação (A4) (parte de style.css) */
/* ============================================================
   FOLHA DE IDENTIFICAÇÃO — A4 horizontal (297 × 210 mm)
   ============================================================ */
#folha-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    background: #3a3d30;
}
.folha-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: #20221a;
    color: #fff;
    border-bottom: 1px solid #2a2c20;
}
.folha-barra-texto { display: flex; flex-direction: column; line-height: 1.3; }
.folha-barra-texto span { font-size: 12px; color: #b8bd96; }
.folha-barra-acoes { display: flex; gap: 10px; }
.folha-controlo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: center;
}
.folha-controlo label { font-size: 13px; color: #d4d6cb; font-weight: 600; }
.folha-controlo input,
.folha-controlo select {
    height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid #4a4d3e;
    background: #2c2f22;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
}
.folha-controlo input { width: 130px; }
.folha-controlo input:focus,
.folha-controlo select:focus { outline: 2px solid #a3a678; outline-offset: 1px; }
.folha-controlo-nota { font-size: 13px; color: #b8bd96; min-width: 120px; }
.folha-area {
    flex: 1;
    overflow: auto;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.folha-escala { position: relative; flex-shrink: 0; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }

.folha-pagina {
    position: absolute;
    top: 0;
    left: 0;
    width: 297mm;
    height: 210mm;
    box-sizing: border-box;
    padding: 10mm 14mm 8mm;
    background: #fff;
    color: #111;
    font-family: 'Inter', Arial, sans-serif;
    transform-origin: top left;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Cabeçalho (igual ao anterior) */
.folha-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 4mm;
    border-bottom: 0.8mm solid #111;
}
.folha-logo { height: 15mm; width: auto; filter: brightness(0); }
.folha-titulo { text-align: right; line-height: 1.15; }
.folha-titulo span { display: block; font-size: 7.2mm; font-weight: 800; letter-spacing: 0.4mm; text-transform: uppercase; }
.folha-titulo small { font-size: 3.6mm; letter-spacing: 1mm; text-transform: uppercase; color: #555; }

/* Centro: logótipo da marca + nome do produto */
.folha-centro {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14mm;
    text-align: center;
    padding: 4mm 8mm;
}
.folha-marca { display: flex; align-items: center; justify-content: center; }
.folha-marca-logo {
    max-width: 190mm;
    max-height: 62mm;
    width: auto;
    height: auto;
    min-height: 34mm;
    object-fit: contain;
    filter: brightness(0); /* os ficheiros das marcas são brancos (para fundos escuros) */
}
.folha-marca-texto { font-size: 26mm; font-weight: 800; letter-spacing: 1mm; text-transform: uppercase; line-height: 1; }
.folha-nome {
    margin: 0;
    max-width: 100%;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.3mm;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Cód. Cor */
.folha-cor { display: flex; align-items: baseline; justify-content: center; gap: 6mm; line-height: 1; }
.folha-cor span { font-size: 8mm; font-weight: 700; letter-spacing: 1.2mm; text-transform: uppercase; color: #444; }
.folha-cor b { font-weight: 800; letter-spacing: 0.8mm; }
.folha-pagina.com-quantidade .folha-cor span { font-size: 6mm; }

/* Linha: fator (esquerda) · quantidade da palete (centro) · QR code (direita) */
.folha-linha-info { display: flex; align-items: center; justify-content: center; gap: 8mm; }
.folha-fator {
    border: 1.2mm solid #111;
    border-radius: 4mm;
    padding: 4mm 8mm 5mm;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1mm;
    min-width: 50mm;
}
.folha-fator-rotulo { font-size: 4mm; font-weight: 700; letter-spacing: 1.2mm; text-transform: uppercase; color: #444; }
.folha-fator-valor { font-size: 8mm; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.folha-fator-valor b { font-size: 16mm; font-weight: 800; letter-spacing: -0.3mm; }
.folha-fator-legenda { font-size: 5mm; font-weight: 600; color: #333; }
.folha-qr { width: 42mm; height: 42mm; flex-shrink: 0; }
.folha-qr svg { width: 100%; height: 100%; display: block; }

/* Quantidade na palete */
.folha-quantidade {
    border: 1.2mm solid #111;
    border-radius: 4mm;
    padding: 4mm 14mm 5mm;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1mm;
    min-width: 120mm;
}
.folha-quantidade-rotulo { font-size: 4mm; font-weight: 700; letter-spacing: 1.2mm; text-transform: uppercase; color: #444; }
.folha-quantidade-valor { display: flex; align-items: baseline; gap: 6mm; line-height: 1; }
.folha-quantidade-valor b { font-weight: 800; letter-spacing: -0.5mm; }
.folha-quantidade-valor span { font-size: 13mm; font-weight: 700; }
.folha-quantidade-conversao { font-size: 6.5mm; font-weight: 600; color: #333; }
.folha-pagina.com-quantidade .folha-centro { gap: 7mm; padding-top: 2mm; padding-bottom: 2mm; }
.folha-pagina.com-quantidade .folha-marca-logo { max-height: 40mm; min-height: 24mm; max-width: 150mm; }
.folha-pagina.com-quantidade .folha-marca-texto { font-size: 18mm; }
.folha-pagina.com-quantidade .folha-nome { -webkit-line-clamp: 3; }


@media print {
    @page { size: A4 landscape; margin: 0; }
    html, body { background: #fff !important; }
    body.folha-aberta > *:not(#folha-overlay) { display: none !important; }
    body.folha-aberta #folha-overlay { position: static; display: block; background: #fff; }
    body.folha-aberta .folha-barra { display: none; }
    body.folha-aberta .folha-area { padding: 0; overflow: visible; display: block; }
    body.folha-aberta .folha-escala { width: 297mm !important; height: 210mm !important; box-shadow: none; }
    body.folha-aberta .folha-pagina { transform: none !important; position: static; }
}