/* ==========================================================================
   Reporte de Producción de Paletizado — hoja Carta VERTICAL (8.5in x 11in).
   Reutiliza header/botones/capture-bar de styles.css; aquí sólo vive el
   layout propio de esta hoja y su @page en vertical (independiente del
   @page horizontal de la etiqueta FFT en index.html/styles.css).
   ========================================================================== */

.field-turno { flex: 0 0 170px; }
.field-responsable { flex: 1 1 220px; min-width: 200px; }

/* ---------------------------------------------------------------------- */
/* VISTA EN PANTALLA — proporción de Carta VERTICAL (8.5in x 11in)         */
/* ---------------------------------------------------------------------- */

.rp-sheet-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
}

.rp-preview-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(360px, 46vw);
}

.rp-panel-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-900);
  text-align: center;
}

.rp-preview-wrap {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 8.5 / 11;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .rp-preview-panel { width: 100%; max-width: 420px; }
}

/* Modo "Vista previa" (misma mecánica que la etiqueta FFT en styles.css:
   body.preview-mode ya oculta header/capture-bar/footer ahí; aquí sólo se
   agranda .rp-sheet-section sobre un fondo tipo mesa de trabajo). */
body.preview-mode .rp-sheet-section {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #58595c;
  overflow: auto;
  padding: 70px 16px 40px;
  align-items: flex-start;
}

body.preview-mode .rp-preview-panel {
  width: min(420px, 42vw);
}

@media (max-width: 900px) {
  body.preview-mode .rp-preview-panel { width: min(420px, 88vw); }
}

body.preview-mode .rp-print-area {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  border-color: transparent;
}

.rp-print-area {
  width: 100%;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--gray-300);
  padding: 5cqw;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: var(--black);
  overflow: hidden;
}

.rp-header-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 2.2cqw;
}

.rp-header-table th,
.rp-header-table td {
  border: 1.3px solid var(--black);
  padding: 0.4cqw 1.8cqw;
}

.rp-header-table th {
  font-size: 2.6cqw;
  font-weight: 700;
  text-align: center;
}

.rp-label-cell {
  width: 30%;
  font-weight: 400;
}

.rp-value-cell {
  font-weight: 600;
  min-height: 1.4em;
}

/* Fila de Responsable: una sola celda unida (colspan=2), SIN línea vertical
   en medio — a diferencia de Turno/Fecha, aquí no hay caja separada para
   el valor, va todo en la misma línea junto a la etiqueta. */
.rp-responsable-cell {
  font-weight: 400;
  min-height: 1.4em;
}

.rp-value-inline {
  font-weight: 600;
  margin-left: 0.8em;
}

/* Columnas (frente: TRG / Almacén — atrás: FBA / Bulky / Fierro): ocupan
   el resto de la hoja. Cada columna es un .rp-col-group con su título
   subrayado (línea horizontal) y
   una línea vertical (border-left) que la separa de la anterior y baja
   hasta el fondo de la hoja porque el grupo es flex y ocupa toda la altura
   disponible. border, NO background: un color de fondo depende de que el
   usuario tenga activado "Gráficos de fondo" en el diálogo de impresión
   (desactivado por default en Chrome) y por eso no salía al imprimir; un
   border SIEMPRE se imprime sin importar esa opción. */
.rp-columns {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 3cqw;
}

.rp-col-group {
  display: flex;
  flex-direction: column;
  border-left: 1.3px solid var(--black);
}

.rp-col-group:first-child {
  border-left: none;
}

.rp-col-title {
  text-align: center;
  font-weight: 700;
  font-size: 3.2cqw;
  padding: 0 0 0.8cqw;
  border-bottom: 1.3px solid var(--black);
  color: var(--black);
}

/* Cara trasera: mismas columnas, pero sin tabla de encabezado arriba —
   un poco de aire antes de los títulos para que no queden pegados al borde. */
.rp-columns-back {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0;
}

/* ==========================================================================
   IMPRESIÓN — garantiza EXACTAMENTE una hoja Carta VERTICAL (8.5in x 11in).
   ========================================================================== */

@page {
  size: letter portrait;
  margin: 0;
}

@media print {
  /* "height: auto" y "overflow: visible" aquí son OBLIGATORIOS: styles.css
     (cargado antes que este archivo, ver <head> de reporte-paletizado.html)
     define su propio bloque @media print con "html, body { height: 8.5in;
     overflow: hidden !important; }" pensado para la etiqueta FFT horizontal
     de una sola página (index.html). Esa regla es global (selector "html,
     body" sin id), así que también alcanza a esta página; si no se pisan
     aquí "height" y "overflow" explícitamente, el body queda con una altura
     fija de 8.5in y overflow oculto, Chrome sólo ve espacio para 1 página y
     recorta/nunca genera la página 2 (la cara trasera queda en blanco).
     Todo lo demás (width, margin, padding, background) ya se sobreescribía
     bien porque este bloque es más específico en orden de cascada — sólo
     faltaban estas dos propiedades. */
  html, body {
    width: 8.5in;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  .no-print { display: none !important; }

  /* Antes las 2 hojas usaban "position: fixed" (ignora todo layout de sus
     ancestros). Ahora viven en flujo normal para que el salto de página
     funcione, así que el padding/max-width de .main-content SÍ se sumaría
     al alto y ancho reales — sin esto, ese padding extra (≈0.5in) empuja el
     contenido a necesitar una 3ª hoja en blanco y desalinea el ancho de
     8.5in de cada página respecto al borde físico de la hoja. */
  .main-content {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* styles.css (cargado antes, ver <head>) también define "body * {
     visibility: hidden; }" de forma global — pensado para la etiqueta FFT,
     pero alcanza esta página igual. Antes esto se contrarrestaba con
     "visibility: visible !important" SÓLO en las 2 hojas (#rp-preview-wrap-*
     y sus descendientes), dejando sus ancestros (.main-content,
     .rp-sheet-section, .rp-preview-panel, body) todavía en
     visibility:hidden — combinado con el salto de página forzado que
     necesita esta hoja (2 páginas), eso confundía la paginación real de
     impresión de Chrome, que sólo sacaba la página 1. Aquí se restaura
     visibility:visible en TODA la cadena de ancestros, no sólo en las
     hojas, para que ningún nodo de por medio quede oculto. */
  body,
  .main-content,
  .rp-sheet-section,
  .rp-preview-panel,
  .rp-preview-wrap,
  .rp-print-page,
  .rp-print-page * {
    visibility: visible !important;
  }

  /* En pantalla, .rp-sheet-section pone los dos paneles lado a lado (flex).
     Para imprimir necesitamos que caigan uno DEBAJO del otro en el flujo
     normal del documento — cada uno ocupando su propia hoja física — y que
     el salto de página (abajo) sea lo único que los separe en 2 páginas. */
  .rp-sheet-section, .rp-preview-panel {
    display: block !important;
    width: auto;
  }

  /* Cada .rp-preview-wrap pasa de "contenedor con aspect-ratio para la
     vista en pantalla" a un bloque de tamaño físico exacto (8.5in x 11in)
     en flujo normal, para que el salto de página los reparta en 2 hojas. */
  #rp-preview-wrap-front, #rp-preview-wrap-back {
    container-type: normal;
    position: static;
    width: 8.5in;
    height: 11in;
    aspect-ratio: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  /* Página 1 = frontal, salto de página, página 2 = trasera — así una
     impresora configurada a doble cara las saca en una sola hoja física. */
  #rp-preview-wrap-front {
    page-break-after: always;
    break-after: page;
  }

  .rp-print-page {
    width: 8.5in;
    height: 11in;
    margin: 0;
    padding: 0.425in;
    border: none;
    overflow: hidden;
    box-sizing: border-box;
    page-break-inside: avoid;
    break-inside: avoid-page;
  }

  /* Estos valores en pt son la conversión EXACTA de los cqw de pantalla a
     escala real de una hoja Carta (8.5in = 612pt de ancho): 1cqw = 6.12pt.
     Así la vista en pantalla (arriba) es un WYSIWYG fiel de la hoja impresa
     real, no una aproximación — evita que el texto salga más chico de lo
     que la gente ve en pantalla antes de imprimir. */
  .rp-header-table { font-size: 13.5pt; }
  .rp-header-table th { font-size: 15.9pt; }
  .rp-header-table th, .rp-header-table td { padding: 2.5pt 11pt; }
  .rp-value-inline { margin-left: 10pt; }
  .rp-columns { margin-top: 0.26in; }
  /* La cara trasera NO tiene tabla de encabezado arriba — sin este ajuste,
     heredaba el mismo margin-top que la frontal (misma clase ".rp-columns")
     y los títulos/líneas empezaban más abajo de lo necesario, reservando
     espacio que aquí no hace falta. Selector con la MISMA especificidad que
     ".rp-columns" arriba, pero declarado después → gana y deja el margen
     mínimo, con los títulos casi al borde superior de la zona imprimible. */
  .rp-columns-back { margin-top: 0.05in; }
  .rp-col-title { font-size: 19.6pt; padding: 0 0 5pt; }

  /* Respaldo: aunque la línea divisoria ya usa border (siempre se imprime),
     esto evita que cualquier otro color de fondo se pierda si el usuario
     imprime sin "Gráficos de fondo" activado. */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}