/* apps/web/public/impresion.css
 *
 * La vista de impresion, que es tambien el «Exportar a PDF» (D-63: el PDF lo guarda el navegador, no el servidor).
 * Hoja ESTATICA enlazada con media="print", como documento.css y fuentes.css: casi todo lo que hay que tocar aqui no
 * lo pinta React con cssMap (la barra, el menu lateral y el panel del ADS, los portales de avisos y menus, el contenido
 * de ProseMirror), cssMap no admite `@media print`, y `@page` solo existe en una hoja.
 *
 * SOLO variables de token del ADS (--ds-*) para colores y espacios. Las excepciones son del papel, que el ADS no
 * tiene: los margenes de la hoja en milimetros y los valores de orphans/widows. El papel claro aunque se lea en
 * oscuro lo hace lib/impresion.ts (pone el tema claro al empezar a imprimir); aqui solo se dice `color-scheme`.
 *
 * Los selectores del contenido son GENERICOS (h1…h6, table, pre, img, details, figure, [data-panel-type]…): una macro
 * nueva que pinte esas etiquetas se imprime bien sin que esta hoja la conozca.
 */
@media print {
  @page {
    margin: 16mm 14mm 18mm;
  }

  :root {
    /* !important: el script de arranque pone `color-scheme` en linea en <html> (packages/shared/src/bootstrap.ts), y
     * con `dark` el navegador pinta oscuros los margenes de la hoja aunque el contenido salga claro. */
    color-scheme: light !important;
    /* Paneles, cabeceras de tabla, bloques de codigo y etiquetas conservan su fondo: sin esto el navegador los
     * imprime en blanco para ahorrar tinta y se pierde lo que significan. Se hereda. */
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  html,
  body {
    background: var(--ds-surface) !important;
    color: var(--ds-text);
  }

  /* ── El marco de la aplicacion fuera ──────────────────────────────────────────────────────────────────────────
   * Barra superior (header), menu lateral y arbol (nav), panel lateral de comentarios e historial (aside), enlaces
   * de salto, y los portales del ADS: avisos flotantes, menus, ventanas y tooltips. */
  header,
  nav,
  aside,
  [data-skip-link-wrapper],
  .atlaskit-portal-container,
  [data-impresion='no'] {
    display: none !important;
  }
  /* En la pagina, todo lo que es interfaz y no contenido: botones (acciones, «Comentar», ordenar una tabla al leer),
   * y las secciones que no son del documento (avisos de edicion del ADS y los comentarios al pie). Dentro del
   * contenido los botones se quedan: una macro plegable podria usar uno como titulo. */
  [role='main'] button:not(.documents-documento button),
  [role='main'] section:not(.documents-documento section),
  .documents-documento .documents-ordenar,
  .documents-documento .column-resize-handle {
    display: none !important;
  }
  [data-impresion='solo'] {
    display: block !important;
  }

  /* Lo que cuelga de #root y no lleva el area principal: los enlaces de salto del ADS, que en pantalla estan fuera de
   * la vista con position y en papel ocupaban la cabecera de la primera hoja. */
  #root > :not(:has([role='main'])) {
    display: none !important;
  }

  /* El layout del ADS es una rejilla a alto de ventana con el area principal desplazable: en papel recortaria todo
   * a la primera hoja. Aqui todo fluye y ocupa el ancho de la hoja. */
  #root,
  #root > :has([role='main']),
  [role='main'],
  [role='main'] * {
    max-height: none !important;
    overflow: visible !important;
  }
  #root,
  #root > :has([role='main']),
  [role='main'] {
    display: block !important;
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    inline-size: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* El area de contenido (ContenidoCentrado: una caja de margenes y dentro la columna de 760 px): sin los margenes de
   * pantalla, que ya los pone la hoja, y a todo el ancho de la hoja aunque la pagina sea de ancho fijo. */
  [role='main'] > * {
    padding: 0 !important;
  }
  [role='main'] > * > * {
    max-width: none !important;
  }

  /* ── Tipografia legible en papel ────────────────────────────────────────────────────────────────────────────── */
  .documents-documento {
    min-height: 0;
    font: var(--ds-font-body);
    overflow-wrap: anywhere;
  }
  .documents-documento p,
  .documents-documento li {
    orphans: 3;
    widows: 3;
  }

  /* Un titulo no se queda solo al final de una hoja: va con lo que le sigue. */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    break-after: avoid;
    break-inside: avoid;
  }

  /* ── Tablas ─────────────────────────────────────────────────────────────────────────────────────────────────
   * Al ancho de la hoja, tambien las «ancho» y «ancho completo» (D-56) y las de columnas con ancho fijo en px, que
   * en pantalla se desplazan y en papel se cortarian por la derecha. El texto se parte dentro de la celda. Una fila
   * no se parte entre dos hojas. */
  .documents-documento .tableWrapper {
    width: 100% !important;
    margin-inline: 0 !important;
    overflow: visible !important;
  }
  .documents-documento table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto;
  }
  .documents-documento col {
    width: auto !important;
    min-width: 0 !important;
  }
  /* `break-word` y no `anywhere` (el de la pantalla): con `anywhere` el ancho minimo de una columna es una letra y
   * la tabla repartia el ancho partiendo «Columna» en «Col/um/na». Asi se parte por palabras (con guiones si el
   * navegador sabe el idioma) y solo se corta una palabra que no cabe entera. Letra algo menor: caben mas columnas. */
  .documents-documento th,
  .documents-documento td {
    font: var(--ds-font-body-small);
    padding: var(--ds-space-075);
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .documents-documento tr,
  .documents-documento thead {
    break-inside: avoid;
  }
  .documents-documento thead {
    display: table-header-group;
  }

  /* ── Bloques que no se parten ──────────────────────────────────────────────────────────────────────────────
   * Una imagen, un panel o una cita corta partidos entre dos hojas no se leen. Un bloque de codigo SI puede partirse
   * (puede ser mas largo que una hoja), pero sus lineas se doblan en vez de salirse por la derecha. */
  .documents-documento img,
  .documents-documento figure,
  .documents-documento [data-panel-type],
  .documents-documento blockquote {
    break-inside: avoid;
  }
  .documents-documento img {
    max-width: 100% !important;
    height: auto !important;
  }
  .documents-documento pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow: visible;
  }

  /* Las marcas de los comentarios en el texto son de la pantalla. */
  .documents-marca-comentario,
  .documents-marca-comentario.documents-marca-comentario-activa {
    background-color: transparent;
    border-block-end: none;
  }
}