/* ---------------------------------------------------------------------------
   El reporte de inventario de la bodega (bodega.js, 19 oct 2026).

   Lo pidió Michael Diaz para el conteo semanal: una hoja que se imprime, se cuenta a
   mano y se firma. En pantalla la hoja se ve como el papel que va a salir, para que lo
   que se mira antes de imprimir sea lo que sale.

   Lo que importa de verdad está en el @media print de abajo:
     - carta (8.5 x 11) con márgenes que caben en cualquier impresora de oficina;
     - fuera la barra lateral, la cabecera del tablero, los botones y el historial;
     - el encabezado del documento va dentro del <thead> de la tabla, y el navegador lo
       repite en cada página: la segunda hoja también dice qué documento es;
     - ningún renglón se parte entre dos páginas, y el nombre de un grupo no se queda
       solo al pie de una hoja con sus artículos en la siguiente;
     - las firmas van juntas: nunca una en una página y las otras dos en la siguiente.

   Las reglas de impresión van bajo html:has(.rep-hoja): solo valen cuando la hoja está
   delante, y así imprimir cualquier otra pantalla del tablero sigue como estaba. El
   tamaño carta y los márgenes van en una página con nombre (@page reporte), que solo usa
   la hoja: con un @page suelto, cualquier Ctrl+P del hub salía forzado a carta.
--------------------------------------------------------------------------- */

.rep-controles .dentro{padding:18px 20px}
.rep-opciones{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:4px 18px;align-items:start}
.rep-opciones > *{min-width:0}
@media(max-width:640px){.rep-opciones{grid-template-columns:minmax(0,1fr)}}
.rep-etq{display:block;font-size:13px;font-weight:600;color:var(--tinta-2);margin-bottom:6px}
.rep-tipos{display:flex;gap:7px;flex-wrap:wrap}
.rep-marcas{display:flex;gap:8px 22px;flex-wrap:wrap;margin:2px 0 14px}
.rep-marcas label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;min-height:32px}
.rep-acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.rep-acciones + .pista{margin:10px 0 0}

/* ------------------------------- la hoja -------------------------------- */

.rep-hoja{background:#fff;border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--sombra-2);padding:30px 32px 26px;margin:0 auto 18px;max-width:1000px;
  color:#1D2320}
@media(max-width:640px){.rep-hoja{padding:18px 14px}}

.rep-tabla{width:100%;border-collapse:collapse;font-size:12.5px}
/* font-size:inherit porque estilo.css le pone 14px a todo <td>, y en carta eso parte
   "Herramienta" encima del nombre del artículo. */
.rep-tabla th,.rep-tabla td{padding:6px 8px;border-bottom:1px solid #DDE3DF;vertical-align:top;
  background:transparent;white-space:normal;font-size:inherit}
.rep-tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* El encabezado del documento, dentro del thead. Se le quita el aspecto de rótulo de
   columna que estilo.css le da a todo <th>. */
.rep-fila-cab th{padding:0 0 12px;border:0;text-transform:none;letter-spacing:normal;
  font-weight:400;color:inherit;font-size:13px}
.rep-cab{display:flex;align-items:flex-start;gap:18px;border-bottom:2px solid var(--verde);padding-bottom:12px}
.rep-emp{display:flex;align-items:center;gap:12px;min-width:0}
.rep-logo{height:38px;width:auto;display:block}
.rep-emp b{display:block;font-size:14px;font-weight:800}
.rep-emp span{display:block;font-size:12px;color:#5C6260;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.rep-datos{margin:0 0 0 auto;display:grid;grid-template-columns:auto auto;gap:2px 12px;font-size:12px;text-align:left}
.rep-datos > div{display:contents}
.rep-datos dt{color:#5C6260;font-weight:600}
.rep-datos dd{margin:0;font-variant-numeric:tabular-nums}
.rep-sin{color:#8B6A1A;font-style:italic}
.rep-titulo{text-align:center;font:800 17px var(--titulo);letter-spacing:.14em;text-transform:uppercase;margin:14px 0 2px}
.rep-que{text-align:center;font-size:12px;color:#5C6260}
@media(max-width:640px){.rep-cab{flex-direction:column;gap:10px}.rep-datos{margin-left:0}}

.rep-columnas th{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#5C6260;
  font-weight:700;border-bottom:1.5px solid #30303c;padding-top:4px}
.rep-grupo td{background:#F1F5F2;font-weight:800;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#105431;border-bottom:1px solid #CFDAD3;padding:5px 8px}
.rep-grupo td span{font-weight:600;letter-spacing:.04em;text-transform:none;color:#5C6260;margin-left:6px}
.rep-fila code{font:600 11.5px ui-monospace,Consolas,monospace;color:#105431;white-space:nowrap}
.rep-c-art b{font-weight:700}
.rep-donde{display:block;font-size:11px;color:#5C6260;margin-top:1px}
/* Las casillas en blanco para escribir con lapicero: con borde a los lados, para que se
   vea dónde va cada número aunque la hoja salga gris. */
.rep-c-mano{border-left:1px solid #CFDAD3;border-right:1px solid #CFDAD3;min-width:74px}
.rep-c-obs{min-width:120px}
.rep-tabla td.rep-c-mano,.rep-tabla td.rep-c-obs{height:30px}
.rep-total td{border-top:1.5px solid #30303c;border-bottom:0;font-weight:800;padding-top:8px}
.rep-nada{text-align:center;color:#5C6260;padding:22px 8px}

.rep-obs{margin-top:20px}
.rep-rot{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#5C6260;font-weight:700}
.rep-obs p{margin:6px 0 0;font-size:13px;white-space:pre-line}
.rep-renglon{border-bottom:1px solid #9AA39E;height:26px}

.rep-firmas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:38px}
.rep-firma{font-size:12px}
.rep-raya{border-bottom:1.5px solid #30303c;height:46px;margin-bottom:6px}
.rep-firma b{display:block;font-size:12.5px;margin-bottom:8px}
.rep-campo{display:flex;align-items:flex-end;gap:8px;color:#5C6260;margin-top:8px}
.rep-campo span{flex:1;border-bottom:1px solid #9AA39E;height:16px}
/* Las firmas van dentro de la tabla, que en el teléfono mide 700px y se desplaza: ahí
   caben las tres a lo ancho, como en el papel. */

.rep-nota-pie{margin:22px 0 0;font-size:10.5px;color:#5C6260;line-height:1.5}

/* La celda que lleva las observaciones y las firmas dentro de la tabla (ver hojaDeReporte):
   sin el relleno ni la raya de una celda de artículo. */
.rep-tabla td.rep-cierre-celda{padding:0;border:0;height:auto}

/* Cuando no cabe (teléfono, o la barra lateral comiéndose media pantalla), la hoja se
   desplaza dentro de su caja y no empuja la página hacia el costado. */
.rep-hoja{overflow-x:auto}
.rep-tabla{min-width:700px}

/* ------------------------------ al imprimir ------------------------------ */

/* Solo la hoja usa esta página (19 oct 2026). Al pie, el número de página: si las hojas
   se separan en la carpeta, se sabe cuál va primero y si falta una. Chrome 131 o más
   nuevo lo pinta; uno más viejo imprime igual, sin el número. */
@page reporte{
  size:letter;margin:11mm 10mm 13mm;
  @bottom-right{content:"Página " counter(page) " de " counter(pages);
    font:9px system-ui,sans-serif;color:#5C6260}
}

@media print{
  html:has(.rep-hoja),html:has(.rep-hoja) body{background:#fff!important}
  /* Lo que no es la hoja: la barra, la cabecera, los botones, el historial, el panel
     lateral si quedó abierto y lo que inyecten otros scripts (el widget de feedback). */
  html:has(.rep-hoja) body > *:not(#app),
  html:has(.rep-hoja) .lateral,
  html:has(.rep-hoja) .encabezado,
  html:has(.rep-hoja) .no-imprimir,
  html:has(.rep-hoja) .velo,
  html:has(.rep-hoja) .panel{display:none!important}
  html:has(.rep-hoja) .marco{display:block;min-height:0}
  html:has(.rep-hoja) .cuerpo{margin:0!important;padding:0!important;display:block}
  html:has(.rep-hoja) .hoja{padding:0!important}
  html:has(.rep-hoja) .rep-hoja{overflow:visible}

  .rep-hoja{border:0;border-radius:0;box-shadow:none;padding:0;margin:0;max-width:none;page:reporte}
  /* La letra se lee en papel, en la bodega, con un lapicero en la mano: nada por debajo
     de unos 7 puntos, y el gris de lo que se busca (código, estante) más oscuro. */
  .rep-tabla{min-width:0!important;font-size:11.5px;table-layout:fixed}
  .rep-tabla th,.rep-tabla td{padding:4px 5px}
  .rep-tabla thead{display:table-header-group}
  .rep-tabla tr{break-inside:avoid;page-break-inside:avoid}
  .rep-grupo{break-after:avoid;page-break-after:avoid}
  .rep-tabla td.rep-c-mano,.rep-tabla td.rep-c-obs{height:24px}
  /* Los anchos en carta, en el <colgroup>: suman 100 con y sin costos. */
  .rep-k-cod{width:10%}.rep-k-ref{width:11%}.rep-k-art{width:25%}.rep-k-uni{width:8%}
  .rep-k-sis{width:8%}.rep-k-mano{width:11%}.rep-k-obs{width:16%}
  /* Con costos, el artículo más ancho (con la letra de papel partía en dos renglones casi
     todos los nombres y la hoja crecía una página) y las casillas de mano algo más
     angostas: los rótulos largos se parten con su guion (&shy; en hojaDeReporte). */
  .rep-con-costos .rep-k-cod{width:9%}.rep-con-costos .rep-k-ref{width:10%}
  .rep-con-costos .rep-k-art{width:20%}.rep-con-costos .rep-k-uni{width:7%}
  .rep-con-costos .rep-k-sis{width:8%}.rep-con-costos .rep-k-cos{width:10%}
  .rep-con-costos .rep-k-val{width:10%}.rep-con-costos .rep-k-mano{width:8%}
  .rep-con-costos .rep-k-obs{width:10%}
  .rep-con-costos th,.rep-con-costos td{padding-left:3px;padding-right:3px}
  .rep-c-mano,.rep-c-obs{min-width:0}
  .rep-fila code{font-size:10px;padding:1px 2px;color:#0B3F24}
  /* El tipo y la unidad, a 10px: son lo de menos (el tipo ya lo dice el grupo) y con la
     letra del cuerpo "Herramienta" y "paquete" no cabían en su columna. */
  .rep-fila .rep-c-ref,.rep-fila .rep-c-uni{font-size:10px}
  .rep-donde{font-size:10px;color:#3F4542}
  .rep-columnas th,.rep-columnas th.num{font-size:9.5px;letter-spacing:.03em;white-space:normal;color:#3F4542}
  .rep-logo{height:30px}
  .rep-titulo{font-size:15px}

  /* El gris del grupo y la raya verde también en papel. */
  .rep-grupo td,.rep-cab{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* Las observaciones, las firmas y la nota van juntas: si no caben, pasan las tres, en
     su renglón de la tabla y con el encabezado del documento encima. */
  .rep-cierre,.rep-cierre-fila{break-inside:avoid;page-break-inside:avoid}
  .rep-firmas{margin-top:30px}
}