/* =============================================================================
   BLOG CUATRO+D — Estilos de impresión
   Se aplican cuando el usuario imprime un artículo o un listado.
   Objetivo: que el contenido sea legible en papel sin elementos UI.
   ========================================================================== */

@media print {

    /* Ocultar elementos de navegación e interactivos */
    header,
    footer,
    .navbar,
    .navbar-toggle,
    .blog-sidebar,
    .blog-breadcrumb,
    .blog-paginador,
    .blog-article-share,
    .blog-article-related,
    .whatsapp-btn,
    .blog-empty-state,
    #lenguaje,
    #lenguaje-2,
    .blog-sidebar-rss {
        display: none !important;
    }

    /* Reset de fondo y color para imprimir */
    body {
        background: #fff !important;
        color: #000 !important;
        padding-top: 0 !important;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 12pt;
        line-height: 1.5;
    }

    /* Forzar a que el contenido principal use todo el ancho */
    .container,
    .container-fluid,
    .blog-main,
    .blog-layout {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
    }

    /* Tipografía del artículo en papel */
    .blog-article-titulo {
        font-size: 24pt;
        line-height: 1.2;
        margin-bottom: 0.4em;
    }
    .blog-article-subtitulo {
        font-size: 16pt;
        color: #555;
        margin-bottom: 1em;
    }
    .blog-article-meta {
        font-size: 10pt;
        color: #555;
    }
    .blog-article-body {
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 12pt;
        line-height: 1.6;
        max-width: 100%;
    }
    .blog-article-body h2 {
        font-size: 16pt;
        margin-top: 1.5em;
        page-break-after: avoid;
    }
    .blog-article-body h3 {
        font-size: 14pt;
        page-break-after: avoid;
    }
    .blog-article-body p,
    .blog-article-body li {
        orphans: 3;
        widows: 3;
    }

    /* Imágenes: que no se corten entre páginas */
    .blog-article-body img,
    .blog-article-imagen-destacada {
        page-break-inside: avoid;
        max-width: 100%;
    }

    /* Links: mostrar la URL al lado del texto */
    .blog-article-body a[href]:after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
    /* Excepción: links internos (anchors) y mailto/tel no se imprimen */
    .blog-article-body a[href^="#"]:after,
    .blog-article-body a[href^="javascript:"]:after,
    .blog-article-body a[href^="mailto:"]:after,
    .blog-article-body a[href^="tel:"]:after { content: ""; }

    /* Tags: simples */
    .blog-tag,
    .blog-category-badge {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #999 !important;
    }

    /* Pre / code: sin fondo oscuro */
    .blog-article-body pre,
    .blog-article-body code {
        background: #f4f4f4 !important;
        color: #000 !important;
        border: 1px solid #ccc;
    }

    /* Pie de página de impresión: que se sepa de qué blog viene */
    .blog-article:after {
        content: "© CUATRO+D — cuatromasd.com/blog/";
        display: block;
        margin-top: 30pt;
        padding-top: 12pt;
        border-top: 1px solid #999;
        font-size: 9pt;
        color: #555;
        text-align: center;
    }
}