/* A4 APAISADO.
 *
 * El hallazgo de Joseph: el PDF salia vertical y las tablas anchas -el
 * presupuesto son doce meses mas totales, proveedores, el comparativo- se
 * cortaban o salian ilegibles de tan chicas. Un presupuesto es ancho por
 * naturaleza: la hoja se adapta a la tabla, no la tabla a la hoja.
 *
 * Va al NIVEL SUPERIOR de esta hoja y no dentro de `@media print`: la hoja
 * entera esta enlazada con `media="print"`, asi que ya solo aplica al
 * imprimir, y algunos navegadores tratan distinto un `@page` anidado.
 *
 * Hay una prueba que genera el PDF de verdad y le lee el `MediaBox`: que la
 * regla este escrita y que el archivo salga apaisado son dos cosas distintas.
 */
@page {
  size: A4 landscape;
  margin: 1.2cm 1.2cm 1.5cm;

  /* EL PIE VA EN CADA PAGINA, y lo pone la hoja, no el documento. Un elemento
     fijo se repite al paginar pero el contenido le pasa por encima; la caja
     de margen vive fuera del area de contenido y no se superpone con nada.
     El PRD pide el pie de NuFlow en el reporte, no solo en la primera hoja. */
  @bottom-center {
    content: "Desarrollado por NuFlow";
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 8pt;
    color: #666;
  }
  @bottom-right {
    content: "Página " counter(page) " de " counter(pages);
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 8pt;
    color: #666;
  }
}

/* Hoja de impresión: es lo que produce el PDF (D56).
 *
 * El navegador ya sabe hacer PDF. Lo que faltaba era decirle qué esconder y
 * cómo encabezar cada página, y eso son unas reglas de CSS en vez de una
 * librería de trescientos kilobytes en el servidor.
 *
 * TRES COSAS QUE UN PDF PARA JUNTA NECESITA Y LA PANTALLA NO:
 *   - Que se sepa de qué empresa y de qué fecha de corte es. Una hoja suelta
 *     sin eso, sobre una mesa, no significa nada.
 *   - Que ninguna tabla se corte a la mitad de una fila.
 *   - Que el color no sea lo único que distingue un estado: sobre papel, y
 *     sobre todo en blanco y negro, el color no llega.
 */

@media print {
  /* Fuera todo lo que no se puede tocar en papel. */
  aside,
  .franja,
  .filtros,
  .no-imprimir,
  .aviso-flotante,
  .fondo-modal,
  nav,
  /* Las filas por area son botones: se imprimen, porque son el dato. */
  button:not(.fila-area),
  .acciones,
  .herramientas,
  .herramientas-tabla {
    display: none !important;
  }

  .solo-impresion:not([hidden]) {
    display: block;
  }

  :root {
    /* Sobre papel el fondo gris no aporta y gasta tinta. */
    --superficie: #fff;
    --superficie-alt: #fff;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 10pt;
  }

  /* LA PAGINA ENTERA, NO LA VENTANA. En pantalla el cuerpo mide 100vh con el
     desplazamiento adentro de main; al imprimir eso recorta el documento a lo
     que entra en una ventana: el PDF del presupuesto salia de UNA pagina con
     las primeras cuarenta filas y nada mas. */
  html,
  body,
  main {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  main {
    margin: 0;
    padding: 0;
    display: block;
  }

  .contenido {
    padding: 0;
  }

  /* El encabezado de cada reporte, que en pantalla es la cabecera de la vista. */
  header.superior {
    border: 0;
    padding: 0 0 8pt;
    margin-bottom: 12pt;
    border-bottom: 2pt solid #033863;
    display: block;
  }
  header.superior h1 {
    font-size: 16pt;
    color: #033863;
  }
  header.superior .sub {
    font-size: 9pt;
    color: #444;
  }
  /* El logo, a la derecha de la cabecera. */
  header.superior .logo-impresion {
    display: flex;
    float: right;
    align-items: center;
    gap: 6pt;
    font-family: 'Kanit', system-ui, sans-serif;
    font-weight: 600;
    font-size: 11pt;
    color: #033863;
  }
  header.superior .logo-impresion small {
    display: block;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 400;
    font-size: 7.5pt;
    color: #666;
  }

  /* De qué empresa y con qué corte. Se arma con `content` para no tener que
     duplicar el dato en el HTML solo para imprimirlo. */
  header.superior::after {
    content: attr(data-pie);
    display: block;
    margin-top: 4pt;
    font-size: 9pt;
    color: #444;
  }

  .card,
  .tarjeta {
    border: 1pt solid #ccc;
    box-shadow: none;
    padding: 8pt;
    margin-bottom: 8pt;
    /* Una tarjeta partida entre dos páginas se lee peor que una página con un
       hueco al final. */
    break-inside: avoid;
  }

  .envoltorio-tabla {
    overflow: visible !important;
    max-height: none !important;
    border: 0;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
  }
  /* NADA PEGAJOSO EN EL PAPEL. En pantalla el encabezado y las filas de area
     se pegan al desplazarse (Fase 33); al paginar, una celda `sticky` se puede
     repetir o superponer a lo que sigue. Se apaga para toda tabla, tambien la
     que en pantalla no se imprime, y hay una prueba que lo mide bajo la
     consulta de impresion. */
  thead th,
  tbody td,
  tbody tr.area,
  tr.area > td {
    position: static !important;
  }
  /* El encabezado se repite en cada página: una tabla de tres hojas sin
     encabezado obliga a volver a la primera para saber qué columna es cuál. */
  thead {
    display: table-header-group;
  }
  tr {
    break-inside: avoid;
  }
  th,
  td {
    border-bottom: 0.5pt solid #ddd;
    padding: 3pt 5pt;
    /* La regla del dinero vale también en papel. */
  }
  th.num,
  td.num,
  .monto {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* EL PRESUPUESTO SE IMPRIME POR TRIMESTRES MAS EL TOTAL (D99). La tabla de
     pantalla tiene doce columnas de mes con anchos fijos que suman mas que la
     hoja: se cortaba en MAY 2026 y perdia el Total. Una tabla de catorce
     columnas numericas a 6 pt no se lee en una reunion; el detalle mensual
     queda en el Excel. Para el papel hay otra tabla, armada de los mismos
     datos, que es la que se ve aca. */
  #tb-envoltorio,
  #tb-pie {
    display: none !important;
  }
  #tabla-impresion {
    width: 100%;
    table-layout: auto;
    font-size: 9pt;
  }
  #tabla-impresion th,
  #tabla-impresion td {
    padding: 2.5pt 5pt;
    vertical-align: top;
  }
  #tabla-impresion tr.area td {
    font-weight: 700;
    background: #f4f7fa;
    border-top: 1pt solid #033863;
  }
  #tabla-impresion tr.grupo td {
    font-weight: 600;
  }
  #tabla-impresion tr.grupo td:first-child {
    padding-left: 14pt;
  }
  #tabla-impresion tr.linea td:first-child {
    padding-left: 26pt;
  }
  #tabla-impresion td.cero {
    color: #999;
  }
  #tabla-impresion td.par small {
    display: block;
    color: #555;
    font-size: 8pt;
  }

  /* Los estados: sin fondo de color, con su texto. Sobre papel el color no
     llega, y en blanco y negro directamente desaparece. */
  .estado,
  .insignia {
    background: none !important;
    color: #000 !important;
    border: 0.5pt solid #666;
    padding: 0 3pt;
  }

  .medidor,
  .barra {
    border: 0.5pt solid #999;
  }
  .medidor i,
  .barra i {
    background: #666 !important;
  }

  /* El gráfico sí se imprime: es media página de información. */
  .grafico {
    max-height: 6cm;
  }

  a[href]::after {
    content: '';
  }

}