/*
 * Estilos de la hoja del catálogo.
 *
 * Servido como archivo suelto y no a través de Vite a propósito: esta hoja la
 * cargan el visor público, el iframe incrustado en la web de otro y la vista de
 * impresión. Depender del manifest de Vite ataría el embed al build del panel.
 *
 * Los colores salen de variables para que cada catálogo pueda cambiarlos sin
 * tocar una línea de CSS.
 */

:root {
    --cat-fg: #111827;
    --cat-muted: #6b7280;
    --cat-line: #e5e7eb;
    --cat-bg: #ffffff;
    --cat-primary: #1b6ef3;
    --cat-accent: #8b2be2;
    --cat-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.cat-page {
    width: var(--sheet-w);
    height: var(--sheet-h);
    background: var(--cat-bg);
    color: var(--cat-fg);
    font-family: var(--cat-font);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: var(--mt) var(--mr) var(--mb) var(--ml);
}

/* Todo lo de dentro de la hoja mide con el borde incluido.
 *
 * Sin esto, cualquier bloque a página completa con relleno —la portada, los
 * separadores, la hoja de aliados— mide 100 % MÁS su padding, se sale de la
 * hoja y al imprimir arrastra una página en blanco detrás de cada uno. */
.cat-page *,
.cat-page *::before,
.cat-page *::after {
    box-sizing: border-box;
}

.cat-sheet {
    display: grid;
    /* minmax(0, 1fr) y no 1fr a secas: el mínimo por defecto de una fila de
       rejilla es `auto`, así que una tabla de veinte medidas ESTIRA su fila,
       la hoja crece por detrás del recorte y al imprimir aparecen páginas en
       blanco intercaladas. */
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
    gap: var(--gutter);
    width: 100%;
    height: 100%;
}

.cat-slot {
    position: relative;
    /* El hueco recorta: el ajuste fino puede mover el contenido, pero no
       sacarlo al margen ni al hueco de al lado. */
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

.cat-slot__inner {
    width: 100%;
    height: 100%;
    transform-origin: center;
}

.cat-slot--spacer { z-index: 0; }
.cat-slot:not(.cat-slot--spacer) { z-index: 1; }

/* ── Producto ─────────────────────────────────────────────────────────────── */

.cat-product {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 2mm;
}

.cat-product__media {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-product__media img {
    width: 100%;
    height: 100%;
    object-position: center;
}

.cat-product__noimg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cat-line);
    background: #fafafa;
    border: 1px dashed var(--cat-line);
    border-radius: 2mm;
}

.cat-product__noimg svg { width: 40%; max-width: 18mm; height: auto; }

.cat-product__body { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.6mm; }

.cat-product__brand {
    font-size: 2.2mm;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cat-muted);
    margin: 0;
}

.cat-product__name {
    font-size: 3.1mm;
    line-height: 1.25;
    margin: 0;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: var(--lines, 2);
    line-clamp: var(--lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cat-product__sku { font-size: 2.3mm; color: var(--cat-muted); margin: 0; }
.cat-product__desc { font-size: 2.5mm; color: var(--cat-muted); margin: 0; line-height: 1.35; }

.cat-product__price { margin: 0.5mm 0 0; font-size: 3.6mm; }
.cat-product__price strong { color: var(--cat-primary); }
.cat-product__before { font-size: 2.6mm; color: var(--cat-muted); margin-right: 1.5mm; }
.cat-product__ask { font-size: 2.8mm; color: var(--cat-muted); }

/* ── Texto y cabeceras ────────────────────────────────────────────────────── */

.cat-text, .cat-catheader { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.cat-align-left   { text-align: left;   align-items: flex-start; }
.cat-align-center { text-align: center; align-items: center; }
.cat-align-right  { text-align: right;  align-items: flex-end; }

.cat-size-sm  { font-size: 2.6mm; }
.cat-size-md  { font-size: 3.4mm; }
.cat-size-lg  { font-size: 5mm; }
.cat-size-xl  { font-size: 7mm; }
.cat-size-2xl { font-size: 10mm; line-height: 1.1; }

.cat-catheader__text { display: block; }
.cat-catheader__rule {
    display: block;
    width: 100%;
    height: 0.8mm;
    margin-top: 1.5mm;
    background: linear-gradient(90deg, var(--cat-primary), var(--cat-accent));
    border-radius: 1mm;
}

/* ── Imagen, precio, QR, fondo ────────────────────────────────────────────── */

.cat-image { width: 100%; height: 100%; }
.cat-image img { width: 100%; height: 100%; display: block; }

.cat-price { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cat-price__now { font-size: 8mm; color: var(--cat-primary); }
.cat-price__before { font-size: 3.4mm; color: var(--cat-muted); }
.cat-price__badge {
    margin-top: 1mm; font-size: 3mm; padding: 0.8mm 2mm; border-radius: 4mm;
    background: var(--cat-accent); color: #fff;
}
.cat-price__ask { color: var(--cat-muted); font-size: 3.4mm; }

.cat-qr { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.cat-qr img, .cat-qr canvas, .cat-qr svg { width: 100%; height: 100%; object-fit: contain; }

.cat-spacer { width: 100%; height: 100%; background: #f8fafc; }

.cat-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--cat-line);
    border-radius: 2mm;
    color: var(--cat-muted);
    font-size: 2.8mm;
    background: repeating-linear-gradient(45deg, #fcfcfd, #fcfcfd 3mm, #f7f8fa 3mm, #f7f8fa 6mm);
}

/* ── Impresión ────────────────────────────────────────────────────────────── */

@media print {
    @page { size: var(--print-size, A4) var(--print-orientation, portrait); margin: 0; }

    html, body { margin: 0; padding: 0; background: #fff; }

    .cat-page {
        box-shadow: none !important;
        margin: 0 !important;
        /* Al imprimir, 100vh ES la caja de página: ni un redondeo de
           milímetros por encima, que es lo que metía una hoja en blanco
           detrás de cada página. */
        height: 100vh;
        width: 100vw;
        overflow: hidden;
    }

    /* Saltar ANTES de cada hoja menos la primera, y no DESPUÉS de cada una:
       con break-after la última fuerza un salto y el PDF acaba en blanco. */
    .cat-page + .cat-page {
        break-before: page;
        page-break-before: always;
    }

    .no-print { display: none !important; }

    /* Los fondos de color son parte del diseño, no decoración del navegador. */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Bloque de familia: foto + barra de título + tabla de medidas.
 *
 * Es el bloque del catálogo técnico de ferretería. Todo el color sale de
 * --cat-primary / --cat-accent, que cada catálogo define en sus tokens, así
 * que cambiar la marca no toca una línea de aquí.
 * ───────────────────────────────────────────────────────────────────────── */

.cat-group {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1.2mm;
    overflow: hidden;
}

/* Contenido pegado ARRIBA, no centrado.
 *
 * Los dos bloques de una fila miden lo mismo, así que con la foto al mismo
 * porcentaje sus barras de título quedan a la misma altura y la hoja se lee
 * en línea. Centrando cada bloque por su cuenta, el de la tabla corta bajaba
 * y las barras salían a distinta altura: descuidado. */
.cat-group { justify-content: flex-start; }
.cat-group > :not(.cat-group__media) { flex-shrink: 0; }

.cat-group__media {
    /* La foto se queda con el alto que deja libre la tabla, entre 18 y 50 mm.
       Con un alto fijo, en las hojas con pocas familias el aire acababa como un
       hueco en blanco bajo cada tabla; así lo aprovecha la foto. La tabla no
       cede nunca: si falta sitio, la foto encoge primero. El tope evita el
       buje del tamaño de un cubo que salía con 62 mm. */
    flex: 1 1 0;
    min-height: 18mm;
    max-height: 50mm;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cat-group__media img {
    /* Un margen lateral para que las fotos anchas (barras, tejas) no toquen
       los bordes del bloque y se lean como producto, no como fondo. */
    max-width: 82%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.cat-group__noimg {
    width: 40%;
    height: 70%;
    display: grid;
    place-items: center;
    color: var(--cat-line);
    background: color-mix(in srgb, var(--cat-line) 25%, transparent);
    border-radius: 1mm;
}

.cat-group__noimg svg { width: 45%; height: 45%; }

/* La barra de título: el elemento que más define este estilo. */
.cat-group__title {
    flex: 0 0 auto;
    margin: 0;
    padding: 1mm 2.2mm;
    background: var(--cat-primary);
    color: #fff;
    border-radius: 0.8mm;
    font-size: 3.1mm;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: capitalize;

    /* Un nombre largo se corta con puntos suspensivos antes que romper la
       altura del bloque y empujar al vecino fuera de la hoja. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cat-group__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 2.7mm;
    line-height: 1.35;
    table-layout: fixed;
}

.cat-group__table th {
    color: var(--cat-primary);
    font-weight: 700;
    text-align: left;
    padding: 0.6mm 1.6mm;
    border-bottom: 0.25mm solid var(--cat-line);
    white-space: nowrap;
}

.cat-group__table td {
    padding: 0.45mm 1.6mm;
    color: var(--cat-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rayado suave: con diez medidas seguidas, seguir la fila con el ojo sin esto
   es incómodo, y este catálogo se lee sobre todo impreso. */
.cat-group__table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--cat-primary) 6%, transparent);
}

.cat-group__table .is-num  { text-align: right; }
.cat-group__table .is-code { color: var(--cat-muted); font-variant-numeric: tabular-nums; }

.cat-group__more {
    margin: 0.6mm 0 0;
    font-size: 2.4mm;
    font-style: italic;
    color: var(--cat-accent);
}

/* La cabecera de categoría en las plantillas técnicas lleva filete de marca. */
.cat-slot--category-header .cat-header {
    border-bottom: 1mm solid var(--cat-accent);
    padding-bottom: 1mm;
}

.cat-group__desc {
    margin: 0;
    font-size: 2.7mm;
    line-height: 1.35;
    color: var(--cat-muted);
}

.cat-group__price {
    margin: 0.4mm 0 0;
    font-size: 3.4mm;
    font-weight: 800;
    color: var(--cat-primary);
}

/* ─────────────────────────────────────────────────────────────────────────
 * Portada de marca y pie de marca.
 *
 * Sin imágenes de fondo: la banda diagonal es un gradiente, así que sirve
 * igual para cualquier comercio y no obliga a subir un arte por catálogo.
 * ───────────────────────────────────────────────────────────────────────── */

.cat-cover {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--cat-primary);
    color: #fff;
    overflow: hidden;
}

/* La diagonal: dos gradientes planos, uno del color de acento y otro más
   oscuro, cortados en ángulo. Es lo que da el aire de cartilla impresa. */
.cat-cover__band {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(112deg, transparent 0 46%, var(--cat-accent) 46% 58%, transparent 58%),
        linear-gradient(112deg, transparent 0 60%, rgba(0, 0, 0, .18) 60% 100%);
    pointer-events: none;
}

.cat-cover > *:not(.cat-cover__band) { position: relative; z-index: 1; }

.cat-cover__head {
    padding: 10mm 10mm 0;
    text-align: center;
}

.cat-cover__logo {
    max-width: 72%;
    max-height: 30mm;
    object-fit: contain;

    /* Chapa blanca en vez de intentar recortar el fondo con filtros: el logo
       viene en PNG con fondo blanco y cualquier truco de mezcla lo dejaba o
       invisible o sucio. Con la chapa se lee siempre, venga como venga. */
    background: #fff;
    border-radius: 2mm;
    padding: 2mm 3mm;
}

.cat-cover__name {
    margin: 0;
    font-size: 8mm;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.cat-cover__tagline {
    margin: 2mm 0 0;
    font-size: 4mm;
    font-weight: 600;
    opacity: .92;
}

.cat-cover__title {
    margin: 6mm 10mm 0;
    font-size: 11mm;
    line-height: 1.02;
    font-weight: 800;
    font-style: italic;
    text-align: center;
    letter-spacing: -0.015em;
    text-shadow: 0 0.6mm 1.2mm rgba(0, 0, 0, .25);
}

.cat-cover__hero {
    flex: 1 1 auto;
    margin: 4mm 8mm;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-cover__hero img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3mm 5mm rgba(0, 0, 0, .35));
}

.cat-cover__foot {
    padding: 0 8mm 8mm;
    display: flex;
    flex-direction: column;
    gap: 1.4mm;
}

/* Las barras de contacto, con la punta en ángulo del catálogo de referencia. */
.cat-cover__bar {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 2.5mm;
    padding: 1.4mm 5mm 1.4mm 3mm;
    background: rgba(0, 0, 0, .28);
    clip-path: polygon(0 0, calc(100% - 4mm) 0, 100% 100%, 0 100%);
    font-size: 3.2mm;
}

.cat-cover__bar--accent { background: var(--cat-accent); }
.cat-cover__bar strong   { font-size: 2.6mm; letter-spacing: .12em; opacity: .85; }

.cat-cover__hours {
    margin: 1mm 0 0;
    font-size: 2.9mm;
    opacity: .9;
}

.cat-cover__links {
    margin: 1.5mm 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4mm;
    font-size: 3mm;
    font-weight: 600;
    border-top: .3mm solid rgba(255, 255, 255, .35);
    padding-top: 1.5mm;
}

/* Pie de marca de las hojas interiores. */
.cat-brandbar {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 3mm;
    padding: 0 3mm 0 4mm;
    background: var(--cat-primary);
    color: #fff;
    border-radius: 0.8mm;
}

.cat-brandbar__logo {
    height: 74%;
    max-width: 30%;
    object-fit: contain;

    /* Chapa blanca y NADA de filtro. El logo es oscuro sobre fondo blanco, así
       que `brightness(0) invert(1)` lo volvía todo blanco: sobre la franja roja
       salía un rectángulo vacío. */
    background: #fff;
    border-radius: 1mm;
    padding: .8mm 1.6mm;
}

.cat-brandbar__name { font-weight: 800; font-size: 3.2mm; }

.cat-brandbar__tag {
    flex: 1 1 auto;
    font-size: 2.8mm;
    opacity: .9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-brandbar__page {
    flex: 0 0 auto;
    width: 6mm;
    height: 6mm;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--cat-primary);
    font-size: 3mm;
    font-weight: 800;
}

/* Ficha corta de un producto suelto dentro de un bloque de familia. */
.cat-group__meta {
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: 2mm;
    font-size: 2.7mm;
}

.cat-group__code  { color: var(--cat-muted); font-variant-numeric: tabular-nums; }
.cat-group__stock { color: var(--cat-primary); font-weight: 700; }

/* Separador de sección: la hoja de color que anuncia una categoría. */
.cat-divider {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--cat-primary);
    color: #fff;
    overflow: hidden;
    padding: 12mm 10mm;
}

.cat-divider__band {
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, transparent 0 52%, var(--cat-accent) 52% 64%, transparent 64%);
    opacity: .9;
    pointer-events: none;
}

.cat-divider > *:not(.cat-divider__band) { position: relative; z-index: 1; }

.cat-divider__kicker {
    margin: 0;
    font-size: 3.2mm;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .85;
}

.cat-divider__title {
    margin: 3mm 0 0;
    font-size: 16mm;
    line-height: .98;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 .8mm 1.6mm rgba(0, 0, 0, .3);
}

.cat-divider__art {
    flex: 0 1 auto;
    margin: 8mm 0 0;
    min-height: 0;
    display: flex;
    justify-content: flex-end;
}

.cat-divider__art img {
    max-height: 70mm;
    max-width: 70%;
    object-fit: contain;
    filter: drop-shadow(0 3mm 5mm rgba(0, 0, 0, .35));
}

.cat-divider__foot {
    position: absolute;
    left: 10mm;
    right: 10mm;
    bottom: 10mm;
    display: flex;
    align-items: center;
    gap: 4mm;
    border-top: .3mm solid rgba(255, 255, 255, .4);
    padding-top: 2.5mm;
    font-size: 3mm;
}

.cat-divider__foot img {
    height: 10mm;
    max-width: 40%;
    object-fit: contain;
    background: #fff;
    border-radius: 1mm;
    padding: 1mm 1.5mm;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Logo suelto, marca de agua y página de aliados.
 * ───────────────────────────────────────────────────────────────────────── */

.cat-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* Sobre el color de marca el logo oscuro no se lee: se pasa a blanco. */
.cat-logo--marca img { filter: brightness(0) invert(1); }

/* Marca de agua: detrás de todo, sin capturar clics y muy clara, para que no
   compita con la foto del producto ni ensucie la tabla de medidas. */
.cat-watermark {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 0;
    /* Muy baja a propósito: tiene que notarse el papel de la marca, no leerse
       el logo. Al 5 % competía con la tabla de medidas, que es lo único que el
       cliente va a mirar de verdad. */
    opacity: .022;
}

.cat-watermark img {
    width: 70%;
    max-height: 60%;
    object-fit: contain;
}

.cat-page .cat-sheet { position: relative; z-index: 1; }

.cat-partners {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8mm;
    padding: 6mm 4mm;
}

.cat-partners__title {
    margin: 0;
    text-align: center;
    font-size: 8mm;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--cat-primary);
}

.cat-partners__title::after {
    content: '';
    display: block;
    width: 28mm;
    height: 1.2mm;
    margin: 3mm auto 0;
    background: var(--cat-accent);
    border-radius: 1mm;
}

.cat-partners__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: 6mm;
    align-content: center;
}

.cat-partners__item {
    margin: 0;
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3mm;
    border: .3mm solid var(--cat-line);
    border-radius: 1.5mm;
    background: #fff;
}

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

.cat-partners__vacio {
    text-align: center;
    color: var(--cat-muted);
    font-size: 3.4mm;
}