/* ============================================================
   Impresión de cualquier pantalla (Ctrl+P o el botón Imprimir de la
   cabecera). Va aparte de estilos.css y solo se aplica al medio print.

   La idea: en papel sobra todo lo que sirve para moverse por el programa
   (menú lateral, cabecera con el buscador, la campana y el chat, botones,
   filtros, pestañas, paginación) y queda lo que se está viendo. app.js
   rellena antes de imprimir la cabecera de impresión (#impresionCabecera:
   título de la pantalla, empresa, fecha y hora, usuario y los filtros en
   vigor) y decide la orientación según el ancho de la tabla más ancha.
   Esa cabecera se repite en cada página porque es el thead de una tabla
   (#impresionMarco) en cuya celda app.js mete el contenido de la pantalla
   mientras se imprime: el navegador solo repite el thead de una tabla de verdad.
   Las pantallas con su propia hoja A4 (composición del saldo, tabla de
   amortización, estados oficiales) abren otra pestaña y no pasan por aquí.
   ============================================================ */
@page { size: A4; margin: 12mm 12mm 14mm; }
/* En pantalla el marco no existe; mientras se imprime (body.imprimiendo) el contenido está dentro de él y se sigue viendo */
@media screen { .impresion-marco { display: none; } body.imprimiendo .impresion-marco { display: block; } body.imprimiendo .impresion-cabecera { display: none; } }

@media print {
  html, body { height: auto; background: white; }
  body { font-size: 10pt; color: #111; }
  .impresion-marco { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; }
  .impresion-marco > thead { display: table-header-group; }
  .impresion-marco > thead > tr > td, .impresion-marco > tbody > tr > td { padding: 0; vertical-align: top; }
  .impresion-cabecera > div { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-bottom: 1.5px solid #1f4e79; padding: 0 0 4px; margin-bottom: 10px; font-size: 9pt; color: #444; }
  .impresion-cabecera .titulo { font-size: 13pt; font-weight: 700; color: #1f4e79; }
  .impresion-cabecera .empresa { font-weight: 600; color: #111; }
  .impresion-cabecera .derecha { text-align: right; white-space: nowrap; }
  .impresion-cabecera .filtros-impresion { flex-basis: 100%; font-size: 8.5pt; color: #555; }
  .impresion-cabecera .filtros-impresion:empty { display: none; }
  .impresion-cabecera > div { flex-wrap: wrap; }

  /* Lo que no va al papel */
  .lateral, .fondo-lateral, .cabecera, #avisos, .panel-chat, .panel-notificaciones, .menu-usuario, .buscador .opciones,
  .filtros, .pestanas, .titulo-pantalla .acciones, .botones, .botones-fila, .punteo-barra, .hoy-accesos, .hoy-aviso .flecha, .hoy-accion, .tarjeta:has(> .hoy-accesos), .hoy-mas,
  .cuenta-pendiente, .zona-soltar, .pie-tabla button, .atajo, kbd { display: none !important; }
  button:not(.enlace):not(.punteo-badge) { display: none !important; }
  .enlace { text-decoration: none; }

  /* El armazón se aplana: el contenido ocupa la hoja entera */
  .app, .principal, #entrada { display: block; }
  .contenido { padding: 0; max-width: none; margin: 0; }
  .titulo-pantalla { display: none; }   /* el título pasa a la cabecera de impresión */
  a { color: inherit; text-decoration: none; }
  .tarjeta { box-shadow: none; border: 1px solid #d5dbe3; break-inside: avoid; padding: 8px 10px; }
  .tarjeta h3 { font-size: 11pt; }
  .tarjetas { gap: 8px; }
  .cifra { font-size: 16pt; }
  .error, .aviso-ambar { border: 1px solid currentColor; }
  .etiqueta { border: 1px solid currentColor; background: none; padding: 0 5px; }
  .punteo-badge { border: 1px solid currentColor; background: none; cursor: default; }
  input, select, textarea { border: 0; border-bottom: 1px solid #bbb; border-radius: 0; padding: 1px 2px; background: none; color: inherit; }
  input[type=checkbox] { border: 1px solid #555; }
  select { appearance: none; }
  textarea { resize: none; }
  .ayuda { display: none; }

  /* Tablas: enteras, con las cabeceras repetidas en cada página y sin partir filas */
  .tabla-envoltorio { overflow: visible; }
  table.tabla { box-shadow: none; font-size: 9pt; border-radius: 0; }
  table.tabla thead { display: table-header-group; }
  table.tabla tfoot { display: table-footer-group; }
  table.tabla tr { break-inside: avoid; page-break-inside: avoid; }
  table.tabla th, table.tabla td { padding: 2px 5px; border-bottom: 1px solid #ddd; }
  table.tabla th { background: none; color: #333; border-bottom: 1px solid #777; white-space: normal; font-size: 8pt; }
  table.tabla tfoot td { background: none; border-top: 1px solid #333; border-bottom: 0; }
  table.tabla tr.clicable:hover td, table.tabla tr.seleccionada td, table.tabla tr.seleccionada-punteo td { background: none; }
  table.tabla th.num, table.tabla td.num { text-align: right; white-space: nowrap; }
  table.tabla .mono { font-size: 8.5pt; }
  .pie-tabla { font-size: 8.5pt; color: #555; margin-top: 4px; }

  /* Hoy: los enlaces se quedan como texto con su marco; los accesos directos y la flecha sobran */
  .hoy-aviso { border: 1px solid #ccc; border-left: 4px solid #9a6700; background: none; break-inside: avoid; }
  .hoy-aviso.rojo { border-left-color: #b42318; }
  .hoy-pendiente { break-inside: avoid; }
  .hoy-numero { border: 1px solid #bbb; background: none; }
  .hoy-resumen { box-shadow: none; border: 1px solid #d5dbe3; }
  .hoy-columnas { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

  /* Solo sale lo que app.js ha metido en el marco: el contenido de la pantalla o, si hay uno abierto, el último diálogo (los demás quedan fuera) */
  body.imprimiendo > :not(.impresion-marco) { display: none !important; }
  .impresion-marco .fondo-modal { position: static; display: block; padding: 0; background: none; overflow: visible; }
  .modal { box-shadow: none; width: auto; padding: 0; border-radius: 0; }
  .modal > h3 { display: none; }   /* su título pasa a la cabecera de impresión */
  .modal .visor { height: auto; min-height: 240mm; border: 0; }
}