/*
 * Hojas y etiquetas: las mismas reglas se usan en pantalla (vista previa
 * escalada) y en papel. Las dimensiones físicas vienen de variables CSS
 * que JS calcula a partir de la configuración (Layout.applyToDocument):
 *
 *   --page-w / --page-h               tamaño físico de la hoja (mm)
 *   --page-margin-top / -left         márgenes de la hoja (padding de .sheet)
 *   --label-w / --label-h             tamaño de cada etiqueta (mm)
 *   --label-gap-x / --label-gap-y     separación entre etiquetas (mm)
 *   --label-font                      tamaño base de la tipografía
 *   --label-border-w                  grosor del borde (0 en hojas precortadas)
 *   --grid-cols                       columnas calculadas que caben en la hoja
 *
 * La regla @page se genera desde JS con margin: 0, así la hoja .sheet es
 * exactamente el papel y no hay dobles márgenes ni saltos inesperados.
 */

/* ============ Hojas ============ */
.sheets {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* El holder reserva el espacio visual de la hoja ya escalada */
.sheet-holder {
    width: calc(var(--page-w-px, 816px) * var(--scale, 1));
    height: calc(var(--page-h-px, 1056px) * var(--scale, 1));
    overflow: hidden;
}

.sheet {
    width: var(--page-w);
    height: var(--page-h);
    padding: var(--page-margin-top) var(--page-margin-left);
    background: #fff;
    overflow: hidden;
    transform: scale(var(--scale, 1));
    transform-origin: top left;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}

.sheet__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols, 1), var(--label-w));
    grid-auto-rows: var(--label-h);
    gap: var(--label-gap-y) var(--label-gap-x);
}

/* ============ Etiqueta (común) ============ */
.label {
    width: var(--label-w);
    height: var(--label-h);
    border: var(--label-border-w, 0.5mm) solid #000;
    background: #fff;
    color: #000;
    padding: 1.5mm;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--label-font, 10px);
    line-height: 1.2;
    break-inside: avoid;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.label__header {
    display: grid;
    grid-template-columns: 17mm 1fr 17mm;
    gap: 1mm;
    align-items: center;
    margin-bottom: 1mm;
}

.label__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8.5mm;
}

.label__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.label__title {
    text-align: center;
}

.label__title h4 {
    margin: 0;
    font-size: 1.1em;
    line-height: 1.1;
    font-weight: bold;
}

.label__title p {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.1;
}

/* ============ Etiqueta de material ============ */
.label__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.label__row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2mm;
    border-bottom: 0.2mm solid #999;
}

.label__row-2 .label__field {
    border-bottom: none;
}

.label__field {
    display: flex;
    gap: 1mm;
    white-space: nowrap;
    overflow: hidden;
    padding: 0.3mm 0;
    border-bottom: 0.2mm solid #999;
}

.label__body > .label__field:last-child {
    border-bottom: none;
}

.label__field-name {
    font-weight: bold;
    flex-shrink: 0;
}

.label__field-value {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============ Etiqueta de código AX ============ */
.label--ax .label__ax-code {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--label-font, 10px) * 4.5);
    font-weight: bold;
    letter-spacing: 0.15em;
    text-align: center;
}

.label--ax .label__ax-name {
    font-size: 1.2em;
    text-align: center;
    padding: 0.5mm 1mm;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ============ Impresión ============ */
@media print {
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    /* Al imprimir, #sheets se mueve a <body> (preview.js) y se oculta el resto */
    body.printing > :not(#sheets) {
        display: none !important;
    }

    .sheets {
        display: block;
        gap: 0;
    }

    .sheet-holder {
        width: auto !important;
        height: auto !important;
        overflow: visible;
    }

    .sheet {
        transform: none !important;
        box-shadow: none !important;
        margin: 0;
        break-after: page;
        page-break-after: always;
    }

    .sheet-holder:last-child .sheet {
        break-after: auto;
        page-break-after: auto;
    }
}