/* ==========================================================================
   ESTILOS DE IMPRESIÓN PROFESIONAL (PDF) · MATEMAS.COM
   Preserva el modo oscuro exacto, tipografía y añade pie de página con logo y enlace
   ========================================================================== */

.btn-print-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    color: #f1f3f9;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 0.45rem 1rem;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-family: 'Inter', system-ui, sans-serif;
    vertical-align: middle;
}
.btn-print-action:hover {
    background: rgba(79, 125, 255, 0.2);
    border-color: #4f7dff;
    color: #ffffff;
    transform: translateY(-1px);
}

.print-footer-watermark {
    display: none;
}

/* ==========================================================================
   REGLA UNIVERSAL INLINE MATHJAX (matemas.com)
   Evita que fórmulas en párrafos, modales y listas se rompan en múltiples líneas
   ========================================================================== */
p mjx-container[jax="SVG"][display="true"],
li mjx-container[jax="SVG"][display="true"],
td mjx-container[jax="SVG"][display="true"],
th mjx-container[jax="SVG"][display="true"],
.modal-pista-content mjx-container[jax="SVG"][display="true"],
.modal-pista-box mjx-container[jax="SVG"][display="true"],
.ex-body mjx-container[jax="SVG"][display="true"],
.box-obs mjx-container[jax="SVG"][display="true"],
.box-note mjx-container[jax="SVG"][display="true"] {
    display: inline-block !important;
    margin: 0 0.25rem !important;
    vertical-align: middle !important;
    text-align: initial !important;
    padding: 0 !important;
}

p mjx-container[jax="SVG"],
li mjx-container[jax="SVG"],
td mjx-container[jax="SVG"],
th mjx-container[jax="SVG"],
.modal-pista-content mjx-container[jax="SVG"],
.modal-pista-box mjx-container[jax="SVG"],
.ex-body mjx-container[jax="SVG"],
.box-obs mjx-container[jax="SVG"],
.box-note mjx-container[jax="SVG"] {
    vertical-align: middle !important;
}

/* Preservar display en bloque SOLO en contenedores explícitos .math-display */
.math-display,
.math-display mjx-container[jax="SVG"][display="true"],
div.math-display mjx-container[jax="SVG"][display="true"] {
    display: block !important;
    margin: 1.4rem auto !important;
    text-align: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 15mm 12mm 18mm 12mm;
    }

    *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    html, body {
        background-color: #0f1117 !important;
        background: #0f1117 !important;
        color: #f1f3f9 !important;
        font-size: 10pt !important;
        line-height: 1.6 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ocultar elementos irrelevantes en la impresión */
    nav, 
    .nav-bar,
    nav.nav-bar,
    .nav-links,
    .nav-cta,
    .btn-hero-primary,
    .btn-hero-secondary,
    .btn-play-canvas,
    .btn-theory,
    .btn-print-action,
    .hero-actions,
    .cta-canvas-box,
    .section-nav,
    .bottom-nav,
    .theory-footer-nav,
    .exercise-solution-toggle,
    footer,
    #floating-page-info,
    #player-navbar,
    #example-pip-window,
    .canvas-modal-overlay {
        display: none !important;
    }

    /* Forzar visibilidad de todas las soluciones desplegables */
    .exercise-solution,
    div[id^="solution-"] {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .theory-card,
    .example-card,
    .example-box,
    .exercise-card,
    .modular-card,
    .box-obs,
    .box-note {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        background-color: #16181f !important;
        background: #16181f !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: none !important;
        margin-bottom: 1.2rem !important;
    }

    .math-display,
    mjx-container {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .container,
    .content-wrap,
    .content-container {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .print-footer-watermark {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 38px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        background: #0f1117 !important;
        padding-top: 6px;
        box-sizing: border-box;
    }

    .print-footer-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-family: 'Inter', system-ui, sans-serif !important;
        font-size: 8.5pt !important;
        color: #94a3b8 !important;
    }

    .print-footer-brand {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }

    .print-footer-brand span {
        color: #4f7dff !important;
    }

    .print-footer-link {
        color: #60a5fa !important;
        text-decoration: underline !important;
        font-weight: 600 !important;
    }
}