/* ============================================================
   PRINT CATALOG - NoNatty
   Estilos exclusivos para @media print.
   Genera un PDF elegante con portada, heroes intercalados
   y tarjetas compactas de producto.

   @version 3.1
   @date 2026
   @description Este archivo define los estilos de impresión para
                el catálogo de productos. Incluye:
                - Portada con logo, título y hero image.
                - Cabecera de portada con año y número de edición.
                - Tagline grande de portada.
                - Páginas hero intercaladas cada N productos.
                - Tarjetas compactas de producto con metadatos.
                - Bloque CTA con enlace, URL visible y código QR.
                - Página de cierre con logo y URL.
                - Estilos de pantalla para el botón de impresión.
   ============================================================ */

/* ============================================================
   PANTALLA: el botón y la portada no se ven normalmente
   ============================================================ */

/* Barra contenedora del botón de impresión y su texto de ayuda */
.nn-print-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 10px;
    flex-wrap: wrap;
}

/* Botón principal "Imprimir catálogo" */
.nn-btn-print {
    background: #0000FF !important;
    color: #FEFEFE !important;
    border: none !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.nn-btn-print:hover {
    background: #0000CC !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 255, 0.25) !important;
}

/* Texto de ayuda junto al botón */
.nn-print-hint {
    font-size: 12px;
    color: #888;
    max-width: 420px;
}

/* La portada del catálogo está oculta en pantalla */
.nn-print-cover { display: none; }

/* ============================================================
   CTA EN PANTALLA (oculta URL y QR por defecto)
   ============================================================
   En la vista normal de pantalla, el bloque CTA muestra
   únicamente el botón "Ver ficha completa". La URL visible
   y el código QR se ocultan para no saturar la interfaz.
   ============================================================ */
.nn-record-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.nn-record-url,
.nn-record-qr {
    display: none;
}

/* Ocultar el bloque CTA de impresión cuando estamos viendo la página web normal */
.nn-print-only-cta {
    display: none !important;
}


/* ============================================================
   @MEDIA PRINT
   ============================================================ */
@media print {

    /* ==== Tamaño y márgenes de página ==== */
    @page {
        size: A4;
        margin: 14mm 12mm 16mm 12mm;
    }

    /* ==== Ocultar todo lo que no es catálogo ==== */
    .no-print,
    header, nav, footer,
    .nn-filters,
    .nn-print-bar,
    .nn-records-count,
    .nn-page-heading,
    .nn-page-header,
    .skip-link,
    script, style,
    .header-main, .header-wrapper,
    .bag, .bag-footer,
    /* Selectores para móvil: paneles de búsqueda, menú hamburguesa, etc. */
    .ss-panel,
    .ss-search-panel,
    .search-panel,
    #searchPanel,
    .mobile-menu,
    .header-actions,
    .hamburger,
    [class*="search-panel"] {
        display: none !important;
    }

    /* ==== Reset general ==== */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html, body {
        background: #FFF !important;
        color: #111 !important;
        font-family: 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 10pt !important;
    }

    /* ============================================================
       PORTADA
       ============================================================ */
    .nn-print-cover {
        display: block !important;
        page-break-after: always;
        break-after: page;
        text-align: center;
        padding: 30mm 10mm 10mm;
        min-height: 240mm;
        position: relative;
    }

    .nn-print-cover-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: 100%;
    }

    /* ============================================================
       CABECERA DE PORTADA (año + número de edición)
       ============================================================
       Fila superior de la portada que muestra información
       editorial: año de publicación a la izquierda y número
       de edición a la derecha. Alineados en baseline para
       que compartan la misma línea tipográfica.
       ============================================================ */
    .nn-print-cover-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        width: 100%;
        max-width: 180mm;
        margin: 0 auto 15mm;
        font-size: 9pt;
        color: #000;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-weight: 500;
    }

    /* Año de publicación del catálogo */
    .nn-print-cover-tagline {
        font-size: 9pt;
        font-weight: 700;
        color: #000;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .nn-print-cover-year {
        font-weight: 700;
    }

    /* Número de edición o issue */
    .nn-print-cover-issue {
        font-weight: 400;
        color: #666;
    }

    /* ============================================================
       TAGLINE GRANDE DE PORTADA
       ============================================================
       Frase destacada en mayúsculas que refuerza la identidad
       de marca. Tipografía pesada (900) y alineación izquierda
       para contraste con el resto de la portada centrada.
       ============================================================ */
    .nn-print-cover-tagline-big {
        font-size: 18pt;
        font-weight: 900;
        color: #000;
        letter-spacing: 2px;
        text-align: center;
        text-align: left;
        margin: 0 auto 4mm;
        max-width: 150mm;
        text-transform: uppercase;
    }

    /* Descripción de la portada */
    .nn-print-cover-desc {
        font-size: 11pt;
        color: #666;
        text-align: center;      /* Centrado */
        margin: 0 auto 12mm;     /* Margen inferior para separar de la imagen */
        max-width: 140mm;
        line-height: 1.5;
    }

    .nn-print-logo {
        font-family: 'Helvetica Neue', Arial, sans-serif;
        font-size: 72pt;
        font-weight: 900;
        letter-spacing: 2px;
        color: #FE0201;                 /* Rojo NoNatty */
        line-height: 0.9;
        margin-bottom: 8mm;
        position: relative;
        display: inline-block;
        text-transform: uppercase;
    }

    /* ® como superíndice */
    .nn-print-logo::after {
        content: '®';
        position: absolute;
        top: -0.05em;
        right: -0.5em;
        font-size: 0.25em;
        color: #FE0201;
        font-weight: 900;
        letter-spacing: 0;
    }

    .nn-print-divider {
        width: 40mm;
        height: 2px;
        background: #0000FF;
        margin: 0 auto 10mm;
    }

    .nn-print-cover-title {
        font-size: 26pt;
        font-weight: 300;
        letter-spacing: 2px;
        color: #000;
        margin: 0 0 4mm;
    }

    .nn-print-cover-subtitle {
        font-size: 11pt;
        color: #666;
        margin: 0 0 14mm;
        letter-spacing: 1px;
    }

    /* Imagen hero de la portada */
    .nn-print-cover-hero {
        width: 100%;
        max-width: 150mm;
        height: 110mm;
        object-fit: cover;
        margin: 0 auto 12mm;
        border: 1px solid #e0e0e0;
    }

    .nn-print-cover-footer {
        font-size: 9pt;
        color: #888;
        font-style: italic;
        max-width: 140mm;
        margin: 0 auto;
        line-height: 1.5;
    }

    /* Heroes intercalados: imagen */
    .nn-print-hero-image {
        display: block !important;
        width: 100%;
        max-width: 160mm;
        height: 110mm;
        object-fit: cover;
        margin: 0 auto 12mm;
        border: 1px solid #e0e0e0;
    }

    /* ============================================================
       LISTA DE PRODUCTOS
       ============================================================ */
    .nn-record-list {
        display: block !important;
    }

    .nn-record-card {
        display: block !important;
        page-break-inside: avoid;
        break-inside: avoid;
        border: 1px solid #e5e5e5 !important;
        border-radius: 4px !important;
        padding: 6mm 6mm 5mm !important;
        margin: 0 0 5mm !important;
        background: #FFF !important;
        box-shadow: none !important;
    }

    .nn-record-card .nn-record-photo {
        display: none !important; /* sin imágenes de producto para ahorrar tinta */
    }

    .nn-record-card .nn-eyebrow {
        display: inline-block;
        font-size: 7pt;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: #0000FF;
        font-weight: 700;
        margin-bottom: 2mm;
    }

    .nn-record-card h2 {
        font-size: 13pt;
        font-weight: 700;
        color: #000;
        margin: 0 0 2mm;
        line-height: 1.25;
        page-break-after: avoid;
    }

    .nn-record-card .nn-record-ingredient {
        font-size: 9pt;
        color: #444;
        font-style: italic;
        margin: 0 0 3mm;
    }

    .nn-record-card .nn-record-meta {
        display: grid;
        grid-template-columns: 32mm 1fr;
        gap: 1mm 4mm;
        font-size: 8.5pt;
        margin: 0 0 3mm;
        padding: 0;
        border: none;
    }

    .nn-record-card .nn-record-meta dt {
        color: #888;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-size: 7pt;
    }

    .nn-record-card .nn-record-meta dd {
        color: #111;
        font-weight: 600;
        margin: 0;
    }

    .nn-record-card .nn-status-active {
        color: #0a7a0a;
        font-weight: 600;
    }

    .nn-record-card .nn-status-archived {
        color: #999;
    }

    /* ============================================================
       CTA: enlace + URL visible + QR
       ============================================================
       Bloque de llamada a la acción que aparece al final de cada
       tarjeta de producto. En impresión se muestra:
       - Enlace subrayado "Ver ficha completa" (columna 1).
       - URL completa visible (columna 1, debajo del enlace).
       - Código QR (columna 2, abarcando ambas filas).
       Se usa flexbox para que el enlace quede a la izquierda y
       el QR a la derecha, facilitando la detección del enlace
       por parte de iOS (que requiere que el texto sea inline).
       ============================================================ */
        /* ============================================================
       CTA: enlace + URL visible + QR (Para pantalla e impresión)
       ============================================================ */
    .nn-print-only-cta {
        display: block !important;
    }

    .nn-record-cta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 4mm;
        padding-top: 3mm;
        border-top: 1px solid #e5e5e5;
        page-break-inside: avoid;
    }

    /* El botón "View full profile" para PC */
    .nn-record-link-visible {
        color: #0000FF !important;
        font-size: 10pt;
        font-weight: 700;
        text-decoration: underline;
        display: inline-block !important;
    }

    .nn-record-hints {
        display: block;
        margin-top: 2mm;
        page-break-inside: avoid;
    }

    /* Nota en rojo */
    .nn-record-touch-hint {
        display: block;
        font-size: 7pt;
        color: #FE0201;
        line-height: 1.3;
        margin-bottom: 1mm;
        font-style: italic;
    }

    /* La URL completa (esta SÍ funciona en iOS) */
    .nn-record-url-link {
        display: block;
        font-size: 7.5pt;
        color: #888;
        font-family: 'Courier New', Courier, monospace;
        word-break: break-all;
        line-height: 1.3;
        text-decoration: none;
    }

    /* QR */
    .nn-record-qr {
        display: block !important;
        width: 18mm;
        height: 18mm;
        flex-shrink: 0;
    }

    /* ============================================================
       PÁGINAS HERO INTERCALADAS
       ============================================================ */
    .nn-print-hero {
        display: block !important;
        page-break-before: always;
        break-before: page;
        page-break-after: always;
        break-after: page;
        text-align: center;
        padding: 20mm 8mm 10mm;
        min-height: 240mm;
        position: relative;
    }

    .nn-print-hero-text {
        max-width: 150mm;
        margin: 0 auto;
        font-size: 10pt;
        color: #333;
        line-height: 1.6;
        text-align: left;
    }

    .nn-print-hero-text strong {
        display: block;
        font-size: 12pt;
        color: #000;
        margin-bottom: 3mm;
        letter-spacing: 1px;
    }

    .nn-print-hero-text small {
        display: block;
        font-size: 7pt;
        color: #999;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 2mm;
    }

    /* ============================================================
       ÚLTIMA PÁGINA - CIERRE
       ============================================================ */
    .nn-print-closing {
        display: block !important;
        page-break-before: always;
        break-before: page;
        text-align: center;
        padding: 40mm 10mm;
    }

    .nn-print-closing-logo-img {
        display: block !important;
        max-width: 80mm;
        height: auto;
        margin: 0 auto 8mm;
    }

    .nn-print-closing-logo {
        font-size: 28pt;
        font-weight: 900;
        letter-spacing: 6px;
        color: #000;
        margin-bottom: 6mm;
    }

    .nn-print-closing p {
        font-size: 10pt;
        color: #666;
        max-width: 120mm;
        margin: 0 auto 4mm;
        line-height: 1.6;
    }

    .nn-print-closing .nn-print-closing-url {
        font-size: 11pt;
        color: #0000FF;
        font-weight: 700;
        letter-spacing: 1px;
        margin-top: 8mm;
    }

    /* ============================================================
       PROTECCIÓN CONTRA CAPAS FLOTANTES
       ============================================================
       Asegurar que las tarjetas de productos no creen capas
       flotantes que bloqueen los toques en iOS.
       ============================================================ */
    .nn-record-card,
    .nn-record-list {
        position: static !important;
        z-index: auto !important;
        background: #FFF !important;
    }

    /* Mantener la portada y los heroes protegidos del menú negro de Safari */
    .nn-print-cover,
    .nn-print-hero,
    .nn-print-closing {
        position: relative !important;
        z-index: 9999 !important;
        background: #FFF !important;
    }
}