/**
 * KnowledgeHub — CSS de impresión (R2.1).
 *
 * Archivo: assets/css/kh-print.css
 * Enqueue: functions.php de astra-kh (R2.1)
 *
 * Objetivo: que una ficha de método técnico imprima como un documento
 * técnico, no como una página web.
 *
 * Estructura REAL del DOM de la ficha (verificada en el navegador, no supuesta):
 *
 *   section.m-hero                        → título + chips (metadatos)
 *   section.m-body.kh-sec                 → contenedor
 *     div.kh-wrap.m-body-grid             → grid 210px | 1fr | 300px
 *       aside.m-index                     → índice de secciones
 *       div.m-doc-col                     → el documento
 *         section.m-section.m-section--N  → CADA SECCIÓN (2, 3, 5, 6, 11…)
 *       aside.m-data-panel                → panel técnico
 *     section.kh-control-doc              → control documental + PIE DE FIRMAS
 *     section.m-feedback                  → formulario (NO va en papel)
 *
 * Trampa evitada: los saltos de página NO van en `section.m-body.kh-sec`
 * (el contenedor) sino en `section.m-section` (cada sección). Ponerlos en el
 * contenedor produce UN salto para todo el documento en vez de uno por sección.
 *
 * Todo dentro de @media print, salvo @page (paged media, no aplica en pantalla).
 */

/* ================================================================
   Página: tamaño y márgenes A4 + encabezado y pie de página
   ================================================================ */
@page {
    size: A4;
    margin: 20mm 16mm 18mm 16mm;

    /* Encabezado: identificador del documento. */
    @top-right {
        content: "KnowledgeHub · Laboratorio USWheat Sudamérica";
        font-family: "Liberation Sans", sans-serif;
        font-size: 0.72em;
        color: #555;
        border-bottom: 1px solid #999;
        padding-bottom: 0.25em;
        width: 100%;
    }

    /* Pie derecho: paginación. */
    @bottom-right {
        content: "Página " counter(page) " de " counter(pages);
        font-family: "Liberation Sans", sans-serif;
        font-size: 0.72em;
        color: #555;
    }

    /* Pie izquierdo: origen. */
    @bottom-left {
        content: "hk.local";
        font-family: "Liberation Sans", sans-serif;
        font-size: 0.68em;
        color: #999;
    }
}

@media print {
    /* ==============================================================
       Quitar el cromo de pantalla: navegación, pie, buscador, filtros,
       formularios y ayudas de accesibilidad.
       ============================================================== */
    nav.topnav,
    ul.navlinks,
    a.brand,
    button.navtoggle,
    header.site-header,
    footer.sitefoot,
    footer .grid,
    footer .bottom,
    .ast-scroll-top-icon,
    form.kh-search,
    form,
    nav.kh-filter-nav,
    nav.m-filter-nav,
    .kh-pagination,
    nav.m-breadcrumb,
    .page-hero-actions,
    .m-hero-actions,
    .m-hero-chips,
    section.m-feedback,
    .cookieadmin_law_container,
    .cookieadmin_cookie_modal,
    .cookieadmin_modal_overlay,
    [class*="cookieadmin"],
    a.screen-reader-text,
    .screen-reader-text {
        display: none !important;
    }

    /* ==============================================================
       Reset de contenedores de pantalla
       ============================================================== */
    html {
        font-size: 10.5pt;
    }

    body {
        padding: 0 !important;
        margin: 0 !important;
        font-family: "Liberation Serif", Georgia, "Times New Roman", serif;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    .astra-kh-full,
    .ast-separate-container,
    .kh-wrap,
    .maincontent {
        max-width: 100% !important;
        width: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    /* ==============================================================
       Colapsar los grids de 3 columnas a una sola.
       Sin esto el contenido queda comprimido en una franja de ~690px.
       ============================================================== */
    .m-body-grid,
    .m-hero-inner,
    .kh-control-doc-grid,
    .kh-ident-grid,
    .kh-ident-meta,
    .m-index-list {
        display: block !important;
        grid-template-columns: 1fr !important;
        width: auto !important;
        max-width: 100% !important;
    }

    aside.m-index,
    aside.m-data-panel,
    aside.m-kpis,
    .m-doc-col {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        position: static !important;
        float: none !important;
    }

    /* ==============================================================
       Portada del documento: identificación + control documental
       ============================================================== */
    section.m-hero {
        border-bottom: 2px solid #000;
        padding-bottom: 0.8em;
        margin-bottom: 1.2em;
    }

    section.m-hero h1,
    .m-hero-title {
        font-size: 1.6em;
        margin: 0 0 0.3em;
    }

    aside.m-kpis {
        margin-bottom: 1em;
    }

    section.kh-control-doc {
        border: 1px solid #333;
        padding: 0.7em 0.9em;
        margin-bottom: 1.4em;
        background: #f6f6f6 !important;
        page-break-inside: avoid;
    }

    .kh-control-doc-label,
    .kh-ident-label {
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.72em;
        letter-spacing: 0.06em;
        color: #333;
    }

    .kh-control-doc-value,
    .kh-ident-value {
        font-family: "Liberation Mono", monospace;
        font-size: 0.88em;
    }

    /* El control documental lleva el PIE DE FIRMAS: no se corta nunca. */
    .kh-control-doc-grid,
    .kh-control-doc-row {
        page-break-inside: avoid;
    }

    /* ==============================================================
       Índice: útil en papel, pero sin la pinta de menú interactivo
       ============================================================== */
    aside.m-index {
        border-bottom: 1px solid #999;
        padding-bottom: 0.6em;
        margin-bottom: 1em;
    }

    .m-index-item {
        display: inline-block;
        text-decoration: none;
        color: #000;
        font-size: 0.9em;
        margin-right: 1em;
    }

    /* ==============================================================
       Cada SECCIÓN empieza en página nueva (el punto de R2.1)
       ============================================================== */
    section.m-section,
    section.m-related-sec,
    section.m-section--2,
    section.m-section--3,
    section.m-section--4,
    section.m-section--5,
    section.m-section--6,
    section.m-section--7,
    section.m-section--8,
    section.m-section--9,
    section.m-section--10,
    section.m-section--11 {
        page-break-before: always;
        page-break-inside: auto;
    }

    /* La primera sección continúa en la página de la portada, sin salto. */
    section.m-section:first-of-type {
        page-break-before: avoid;
    }

    /* El contenedor NO debe romper: si no, se cuela una página en blanco. */
    section.m-body,
    section.m-body.kh-sec,
    .m-doc-col {
        page-break-before: auto !important;
    }

    /* ==============================================================
       Contenido: que no se corte a media frase ni a media tabla
       ============================================================== */
    .kh-prose,
    .kh-prose p,
    .kh-prose ul,
    .kh-prose ol,
    .kh-prose table,
    .kh-prose pre,
    .kh-prose blockquote,
    .m-result-card,
    .m-section-title,
    h1, h2, h3, h4 {
        page-break-inside: avoid;
    }

    h1, h2, h3, h4 {
        font-family: "Liberation Sans", Helvetica, Arial, sans-serif;
        color: #111;
        page-break-after: avoid;
    }

    h2, .m-section-title {
        font-size: 1.25em;
        border-bottom: 1px solid #666;
        padding-bottom: 0.25em;
        margin: 0 0 0.8em;
    }

    /* ==============================================================
       Tablas y tarjetas de resultados
       ============================================================== */
    table {
        width: 100%;
        border-collapse: collapse;
        margin: 0.9em 0;
        font-size: 0.9em;
    }

    th, td {
        border: 1px solid #555;
        padding: 0.35em 0.55em;
        text-align: left;
    }

    th {
        background: #e8e8e8 !important;
        font-weight: 700;
    }

    .m-results-grid {
        display: block !important;
    }

    .m-result-card {
        border: 1px solid #999;
        padding: 0.5em 0.7em;
        margin-bottom: 0.6em;
    }

    /* ==============================================================
       Enlaces: sin subrayado azul de pantalla; la URL no se imprime
       (mantiene el documento legible)
       ============================================================== */
    a,
    a:visited {
        color: #000;
        text-decoration: none;
    }
}