/* ===========================================================================
   Hoja de impresión de las bases — «Guardar como PDF» del navegador.

   En pantalla mantiene la identidad oscura de Témpora; al imprimir cambia a
   tinta negra sobre papel blanco, porque un documento legal se lee en papel y
   nadie quiere gastar un cartucho entero en un fondo pizarra.
   =========================================================================== */

.hoja-impresion .contenedor { max-width: 840px; padding-block: clamp(2rem, 5vw, 3.5rem); }

.hoja-impresion__cabecera {
  border-bottom: 1px solid var(--linea-viva);
  padding-bottom: 1.4rem;
  margin-bottom: 2.75rem;
}
.hoja-impresion__marca {
  margin: 0 0 .6rem;
  font-family: var(--ui);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lima);
}

@media print {
  @page { margin: 18mm 16mm; }

  html, body {
    background: #fff !important;
    color: #000 !important;
  }
  .halo, .no-imprimir, .cabecera, .pie { display: none !important; }

  .hoja-impresion .contenedor { width: 100%; max-width: none; padding: 0; }

  h1, h2, h3, strong { color: #000 !important; }

  h1 { font-size: 21pt; font-weight: 400; }
  h2 {
    font-size: 12.5pt;
    font-weight: 600;
    break-after: avoid;
    page-break-after: avoid;
  }
  p, li { font-size: 10.5pt; line-height: 1.55; orphans: 3; widows: 3; }

  ol, ul, blockquote, table { break-inside: avoid; page-break-inside: avoid; }

  .hoja-impresion__cabecera { border-bottom: 2px solid #000; }
  .hoja-impresion__marca { color: #000 !important; }

  a { color: #000 !important; text-decoration: underline; }
  /* En papel, un enlace sin su dirección es un callejón sin salida. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #444; }

  .bases-aviso {
    border-left: 3px solid #666 !important;
    background: none !important;
    padding-left: .8rem;
  }
}

/* ===========================================================================
   Tablas de auditoría en papel.

   Un informe de auditoría es una tabla larga, y una tabla larga en papel falla
   siempre de las mismas cuatro formas. Cada regla de aquí evita una:

     1. La segunda hoja sale sin títulos de columna. Se arregla con
        `display: table-header-group`, que hace que el navegador repita el
        `<thead>` en cada página. Es la razón de que el encabezado esté en un
        `<thead>` de verdad y no en una fila en negrita.

     2. Una fila se parte por la mitad entre dos hojas y quedan tres letras
        arriba y el resto abajo. `break-inside: avoid` en cada `<tr>`.

     3. Un dato largo —un correo, una huella— no cabe, no se parte y empuja la
        tabla fuera del papel: eso es lo que se ve como columnas corridas y
        texto encima de texto. `word-break` en las celdas que traen esos datos.

     4. Una fecha con hora se parte en dos renglones y la tabla crece al doble
        de alto sin motivo. `white-space: nowrap` sólo en ésas.

   No hay ni un ancho en píxeles. El navegador sabe cuánto mide la hoja; una
   columna en píxeles no lo sabe y por eso se sale.
   =========================================================================== */

.hoja-impresion--ancha .contenedor { max-width: 1100px; }

/* En PANTALLA cada bloque se desplaza solo si su tabla no cabe. Una tabla de
   nueve columnas en un celular de 375 px no cabe de ninguna manera, y sin esto
   quien abre el informe desde el teléfono —para revisarlo antes de guardarlo—
   se encuentra la página entera corrida hacia el lado.

   En PAPEL se anula: ahí no hay nada que desplazar y `overflow` le impide al
   navegador partir la tabla entre hojas, que es justo lo que tiene que hacer. */
.hoja-bloque {
  margin-bottom: 2.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.hoja-bloque h2 { font-size: 1.05rem; margin-bottom: .6rem; }

.tabla-papel {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  /* `fixed` reparte el ancho sin mirar el contenido, que es lo que impide que
     una celda con un correo larguísimo se lleve media tabla. */
  table-layout: fixed;
}
.tabla-papel--resumen { max-width: 26rem; }

.tabla-papel th,
.tabla-papel td {
  border: 1px solid var(--linea-viva);
  padding: .38rem .5rem;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.tabla-papel thead th {
  background: rgb(255 255 255 / .06);
  font-family: var(--ui);
  font-weight: 600;
  font-size: .78rem;
}
.tabla-papel .numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-papel .fecha  { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-papel .parte  { word-break: break-all; }

.hoja-pie { margin-top: 2rem; border-top: 1px solid var(--linea); padding-top: .8rem; }

@media print {
  .hoja-impresion--ancha .contenedor { max-width: none; }

  @page { margin: 12mm 10mm; }

  .hoja-bloque { break-inside: auto; page-break-inside: auto; overflow: visible; }
  .hoja-bloque h2 { break-after: avoid; page-break-after: avoid; }

  /* Lo que hace que la tabla siga siendo legible en la hoja siete. */
  .tabla-papel thead { display: table-header-group; }
  .tabla-papel tfoot { display: table-footer-group; }
  .tabla-papel tr    { break-inside: avoid; page-break-inside: avoid; }

  /* La regla general de más arriba pide que las tablas no se partan NUNCA.
     Para una tabla de mil filas eso es imposible de cumplir y el navegador
     acaba resolviéndolo como puede, casi siempre mal. Aquí se le permite
     partirla, que es lo correcto: lo que no debe partirse es una FILA. */
  .tabla-papel { break-inside: auto; page-break-inside: auto; }

  .tabla-papel th,
  .tabla-papel td {
    border-color: #999 !important;
    color: #000 !important;
    font-size: 8pt;
    padding: 2pt 3pt;
    line-height: 1.3;
  }
  .tabla-papel thead th { background: #eee !important; font-size: 8pt; }

  /* En una tabla, la dirección detrás de cada enlace destroza el ancho de la
     columna. La regla que las añade es correcta en un texto corrido y aquí no. */
  .tabla-papel a[href^="http"]::after { content: none; }

  .hoja-pie { border-top: 1px solid #999; }
}