/* ═══════════════════════════════════════════════════════════════════
   estilosImpresion.css — vista de impresión del portal público
   (MHF-HU079, 2026-09-22)

   Objetivo: que un visitante con poco acceso a internet pueda
   imprimir (o "Guardar como PDF" desde el diálogo nativo del
   navegador — no hay generación de PDF en el servidor, el propio
   `window.print()` alcanza) una página del portal con el contenido
   COMPLETO y el diseño institucional real, no lo que se ve en
   pantalla recortado por scroll/carrusel/pestañas/acordeón.

   Botón: "Imprimir esta página" en el widget de accesibilidad
   (accesibilidad-widget.js, data-a11y-accion="imprimir" → window.print()).
   Ese botón es un atajo — cualquier Ctrl+P también dispara estas
   mismas reglas, así que TODO acá tiene que valer sin depender de que
   el visitante haya pasado por el widget.

   Reglas generales primero, después una sección por bloque "complejo"
   (tabs, acordeón, carrusel, banner con cubo 3D) cuyo estado normal en
   pantalla oculta la mayor parte de su contenido.
   ═══════════════════════════════════════════════════════════════════ */
@media print {

    /* Colores institucionales reales, no el recorte que hacen los
       navegadores por default (fondos a blanco, texto a negro) — sin
       esto, el pedido explícito de "conservar su diseño institucional"
       no se cumple: la franja de color de un banner, el fondo de una
       card, el chip de un tipo de documento, todo saldría en blanco. */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Utilidad general — cualquier elemento (de este archivo en
       adelante) que no tenga sentido en papel se marca con esto en vez
       de sumar una regla de recorte por cada caso nuevo que aparezca. */
    .no-imprimir { display: none !important; }

    /* ── Chrome de la app: nada de esto tiene sentido en papel ────── */
    .a11y-widget,
    .portal-ir-arriba,
    .portal-nav-buscador-resultados,
    .portal-navbar-hamburguer {
        display: none !important;
    }

    /* Modales propios del portal (sin Bootstrap, ver
       _modal_recursos.html / _modal_aviso_especial.html) — SIEMPRE
       ocultos en la impresión, estén abiertos o no. Ninguno de los dos
       es contenido de la página (uno es un selector de recursos para
       descargar, el otro un aviso emergente); si el visitante imprime
       con uno abierto, su backdrop taparía media hoja. Esta es la
       "mayor dificultad" que motivó este archivo: acá se resuelve de
       una — ninguno de los dos usa el sistema modal/backdrop/scroll-lock
       de Bootstrap (que sí complica esto en otras pantallas), son
       [hidden] simple + su propio backdrop, así que alcanza con
       forzarlos ocultos sin más mecanismo. */
    .portal-recursos-modal,
    .portal-recursos-backdrop,
    .portal-aviso-especial-modal,
    .portal-aviso-especial-backdrop {
        display: none !important;
    }
    body.portal-recursos-open,
    body.portal-aviso-especial-open {
        overflow: visible !important;
    }

    /* ── Layout general de la página ───────────────────────────────
       El ancho fijo del viewport no tiene sentido en una hoja — que
       ocupe el ancho disponible de la página impresa. */
    .portal-container,
    .portal-repositorio-pagina > .portal-container {
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Fondo de página a color (MHF-HU076, estilo 'color' del muro
       documental) imprime igual — ya lo cubre el `print-color-adjust`
       de arriba — pero el navegador puede clippear un `min-height`
       pensado para la pantalla; se libera para que la hoja no corte
       contenido de más. */
    .portal-repositorio-pagina,
    .portal-main {
        min-height: 0 !important;
    }

    /* Imágenes: nunca más anchas que la hoja. */
    img { max-width: 100% !important; }

    /* Evitar que un bloque o una tarjeta se parta justo en el borde
       de una hoja dejando la mitad de un título de un lado y el
       cuerpo del otro — "mejor esfuerzo": no es infalible con
       contenido muy largo, pero ayuda en el caso típico. */
    .portal-bloque-wrapper,
    .portal-repositorio-card,
    .portal-card,
    .portal-noticia-card {
        break-inside: avoid;
    }

    /* ── Bloque "Pestañas" (tabs.html) ─────────────────────────────
       En pantalla solo el panel `.is-active` es visible
       (`.portal-tabs-panel[hidden]`/`:not(.is-active)` →
       `display:none`, ver estilosBloques.css). Para imprimir "el
       contenido completo" hace falta TODOS los paneles, uno debajo
       del otro — la barra de pestañas clickeable no tiene sentido en
       papel, así que se oculta entera (indicador incluido). */
    .portal-tabs-cabecera { display: none !important; }
    .portal-tabs-panel {
        display: block !important;
        break-inside: avoid;
        padding-top: 1rem;
        border-top: 1px solid var(--c-border, #ccc);
    }
    .portal-tabs-panel:first-child { border-top: none; padding-top: 0; }

    /* ── Bloque "Acordeón" (acordeon.html) ─────────────────────────
       Colapsado vía `max-height:0` (no `display:none`) + un
       `style.maxHeight` inline que pone el JS al abrir un ítem — hace
       falta ganarle también al inline con `!important` acá. */
    .portal-acordeon-body {
        max-height: none !important;
        overflow: visible !important;
    }

    /* ── Bloque "Carrusel de imágenes" (carrusel_imagenes.html,     ──
       y la galería por pestaña de tabs.html, que reusa esta misma    ──
       estructura) ─────────────────────────────────────────────────
       El viewport recorta con `overflow:hidden` y el track se corre
       con un `transform: translateX()` inline por JS — para papel,
       las slides se apilan una debajo de la otra en vez de una al
       lado de la otra recortada. */
    .portal-carrusel-viewport {
        overflow: visible !important;
        height: auto !important;
    }
    .portal-carrusel-track {
        display: block !important;
        transform: none !important;
    }
    .portal-carrusel-slide {
        position: static !important;
        width: 100% !important;
        flex: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        break-inside: avoid;
        margin-bottom: 1rem;
    }
    .portal-carrusel-btn,
    .portal-carrusel-dots {
        display: none !important;
    }

    /* ── Bloque "Banner de noticias destacadas" ─────────────────────
       Variante "carrusel": cada slide es `position:absolute;opacity:0`
       salvo la `.is-active` — se apilan igual que el carrusel de
       arriba. Variante "cubo 3D": las 4 caras están SIEMPRE en el DOM
       pero rotadas en 3D con `transform: rotateY() translateZ()` y
       animadas por JS (Web Animations API) — para imprimir alcanza
       con anular esa transformación: sin ella, las 4 caras dejan de
       superponerse y quedan en el flujo normal, una debajo de otra. */
    .portal-banner-noticias-slide {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        break-inside: avoid;
        margin-bottom: 1rem;
    }
    .portal-cubo-noticias-cara {
        transform: none !important;
        position: static !important;
        break-inside: avoid;
        margin-bottom: 1rem;
    }
    .portal-cubo-noticias-faces { transform-style: flat !important; }
    .portal-banner-noticias-dots { display: none !important; }

    /* ── Modal de "Acceso directo" (grilla_accesos_directos.html) ───
       A diferencia del modal de recursos/aviso especial (arriba,
       SIEMPRE oculto — es UI transitoria, no contenido), acá el
       `modal_cuerpo` es texto real que escribió el operador: dejarlo
       afuera de la impresión contradice "contenido completo" (pedido
       explícito 2026-09-22). El modal COMPARTIDO en sí (el que abre
       el click, `.portal-acceso-modal` sin más) sigue oculto — solo
       puede mostrar UNO a la vez y arranca vacío hasta el primer
       click, así que no sirve para imprimir; en su lugar se revela
       `.portal-acceso-modal-impresion`, la lista server-side de TODOS
       los accesos con modal, ya resuelta en el HTML. */
    .portal-acceso-modal-impresion {
        display: block !important;
        margin-top: 1.5rem;
    }
    .portal-acceso-modal-impresion-item {
        break-inside: avoid;
        padding-top: 1rem;
        margin-top: 1rem;
        border-top: 1px solid var(--c-border, #ccc);
    }
    .portal-acceso-modal-impresion-item:first-child {
        border-top: none;
        margin-top: 0;
    }

    /* ── Embeds de redes sociales (embed_red_social.html) ───────────
       Un iframe/blockquote de un tercero (Instagram, X, Facebook) no
       puede renderizar en un PDF — pide JS + internet en vivo en el
       momento de imprimir, así que lo que salía era el cartel
       "Cargando…" congelado o un recuadro vacío (bug real reportado
       2026-09-22, visto en un PDF de prueba real). Se oculta el embed
       y se muestra en su lugar el link directo, que sí existe
       server-side.

       `.portal-embed-rs blockquote`/`.portal-embed-rs-iframe` NO
       alcanzan solos: cuando Instagram/X sí llegan a cargar antes de
       imprimir, `embed.js`/`widgets.js` REEMPLAZAN el <blockquote> por
       un <iframe> propio del tercero (clases `instagram-media
       instagram-media-rendered`, ninguna nuestra) — eso seguía
       imprimiéndose duplicado junto al link de fallback (visto en un
       PDF real 2026-09-22). Por eso acá se oculta el bloque `.portal-
       embed-rs` ENTERO sea lo que sea que tenga adentro en ese
       momento — pero solo cuando le sigue el fallback (selector
       `:has()` + hermano-adyacente), para no tapar el cartel de "URL
       no reconocida" (ese caso no tiene fallback, ver
       `embed_red_social.html`). */
    .portal-embed-rs:has(+ .portal-embed-rs-fallback-impresion) {
        display: none !important;
    }
    .portal-embed-rs-fallback-impresion {
        display: block !important;
        color: var(--c-text, #333);
    }

    /* ── Video embebido (video_embebido.html y otros bloques con      ──
       <video>) ────────────────────────────────────────────────────
       Los controles NATIVOS del navegador (si algún bloque llegara a
       usar el atributo `controls` a secas) quedan capturados en la
       impresión como una franja gris con íconos rotos — sin sentido
       en papel, ya que no hay play posible. Cubre solo Chrome/Edge
       (pseudo-elementos WebKit), que es la mayoría de "Guardar como
       PDF" real, pero no es un fix universal. */
    video::-webkit-media-controls,
    video::-webkit-media-controls-enclosure {
        display: none !important;
    }
    /* Pero el portal NO usa esos controles nativos — usa una skin
       propia (`portal-video-controles.js`, `data-portal-video-custom`)
       con su propio botón de play grande y su propia barra de
       progreso/volumen/pantalla-completa, armados con <div>/<button>
       normales (ver estilosBloques.css, sección "Video — controles
       personalizados"). La regla de arriba no les hace nada — son HTML
       nuestro, no pseudo-elementos del navegador — así que en un PDF
       real seguían imprimiéndose ENCIMA del frame del video: el botón
       de play centrado y el degradé con la barra inferior "cortaban"
       visualmente la imagen (bug real visto en un PDF de prueba real
       2026-09-22). En papel no hay play posible, así que se ocultan
       los dos y queda el frame/poster del video solo, como una imagen
       fija. */
    .portal-video-custom-play-grande,
    .portal-video-custom-controles {
        display: none !important;
    }

    /* ── Línea de tiempo con detalle en modal/flotante ──────────────
       Limitación conocida: en esos dos modos (`modo_detalle`), el
       texto extendido de cada hito vive en un <template> que el
       navegador nunca renderiza al DOM salvo que el visitante haga
       click (portal-timeline.js lo clona recién ahí) — no hay regla
       CSS que pueda revelar algo que no está en el árbol del
       documento. En modo "inline" no aplica (ya se ve todo). Queda
       para una vuelta futura si hace falta cubrir ese caso también. */

}