/* ============================================================
   El informe de calibración: en pantalla y en papel.

   Una sola maquetación para los dos medios. En pantalla se ven las dos
   hojas una debajo de otra, con sombra, como un documento; al imprimir
   desaparece todo lo que no es el informe y cada hoja cae en su página.

   Va en su propia hoja de estilos porque sólo hace falta en esta
   pantalla, y porque las reglas de impresión son delicadas: mezcladas
   con el resto de la app terminan afectando cosas que no deben.

   Medidas en milímetros a propósito. El informe se imprime en A4 y
   pensar en píxeles para papel lleva a márgenes que no calzan.
   ============================================================ */

.inf {
  --tinta: #10233F;
  --tinta-2: #3D4F68;
  --tinta-3: #6B7C93;
  --linea: #C9D4E2;
  --verde: #15803D;
  --azul: #1B3A8C;
  --fondo-cab: #F2F6FA;

  color: var(--tinta);
  font-size: 8.8pt;
  line-height: 1.3;
}

/* El documento, del ancho de un A4.

   No se fija el alto: cuántas hojas ocupa depende de cuántas
   herramientas se usaron en la calibración, y forzar un número de
   páginas obligaría a encoger o estirar el contenido para calzar. Lo
   que sí se cuida es que ninguna sección se parta por la mitad. */
.inf__pagina {
  width: 210mm;
  min-height: 297mm;
  padding: 12mm 11mm 14mm;
  margin: 0 auto 8mm;
  background: #fff;
  box-shadow: 0 2px 16px rgba(15, 23, 42, .18);
}

/* ---------- cabecera ---------- */
.inf__cab {
  display: flex; align-items: center; gap: 6mm;
  padding-bottom: 3mm; margin-bottom: 3mm;
  border-bottom: 2.5pt solid var(--verde);
}
.inf__logo { width: 28mm; height: auto; flex: none; }
.inf__titulo__k {
  font-size: 8pt; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-3); font-weight: 700;
}
.inf__titulo h1 {
  font-size: 13.5pt; line-height: 1.15; color: var(--azul);
  font-weight: 800; letter-spacing: -.015em;
}
.inf__fecha__v { white-space: nowrap; }

/* ---------- rejilla de secciones ---------- */
.inf__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5mm; margin-bottom: 3mm;
  align-items: start;
}
.inf__sec { margin-bottom: 2.5mm; break-inside: avoid; }
.inf__sec--ancha { grid-column: 1 / -1; }

.inf__h2 {
  display: flex; align-items: center; gap: 2.5mm;
  font-size: 9.4pt; font-weight: 800; color: var(--azul);
  text-transform: uppercase; letter-spacing: .02em;
  margin-bottom: 1.5mm;
  break-after: avoid;
}
.inf__num {
  display: inline-grid; place-items: center;
  width: 6mm; height: 6mm; flex: none;
  background: var(--verde); color: #fff;
  border-radius: 1.4mm; font-size: 8pt;
}

/* ---------- tablas ---------- */
.inf__tabla { width: 100%; border-collapse: collapse; }
.inf__tabla thead { display: table-header-group; }
.inf__tabla tr { break-inside: avoid; }
.inf__tabla th {
  background: var(--azul); color: #fff;
  font-size: 8pt; font-weight: 700; text-align: left;
  padding: 1.4mm 2mm;
}
.inf__tabla td {
  padding: 1.3mm 2mm; border-bottom: .3pt solid var(--linea);
  vertical-align: middle;
}
.inf__td--num { text-align: right; font-variant-numeric: tabular-nums; }
.inf__td--nota { text-align: center; width: 12mm; }
.inf__td--destaca { background: #F0FDF4; font-weight: 700; }
/* La boquilla que se salió del rango: es la que hay que cambiar. */
.inf__fila--fuera td { background: #FEF2F2; font-weight: 700; color: #B91C1C; }

.inf__fichas { width: 100%; border-collapse: collapse; }
.inf__fichas th {
  text-align: left; font-weight: 700; font-size: 8.6pt;
  padding: .9mm 2mm .9mm 0; width: 42%;
  border-bottom: .3pt solid var(--linea);
  background: none; color: var(--tinta);
}
.inf__fichas td {
  padding: .9mm 0; border-bottom: .3pt solid var(--linea);
  font-size: 8.6pt;
}
/* El hueco para escribir a mano cuando el dato no se capturó. */
.inf__linea {
  display: inline-block; min-width: 32mm;
  border-bottom: .5pt solid var(--tinta-3);
  height: 3.6mm;
}

/* ---------- notas de evaluación ---------- */
.inf__nota {
  display: inline-block; width: 3.6mm; height: 3.6mm;
  border: 1pt solid var(--tinta-3); border-radius: 50%;
  vertical-align: middle;
}
.inf__nota--optimo  { border-color: #16A34A; background: #16A34A; }
.inf__nota--ajustar { border-color: #D97706; background: #D97706; }
.inf__nota--fuera   { border-color: #DC2626; background: #DC2626; }

.inf__leyenda { display: flex; gap: 5mm; margin-top: 2mm; font-size: 8pt; }
.inf__leyenda__it { display: flex; align-items: center; gap: 1.5mm; }

/* ---------- cabecera con fecha ---------- */
.inf__fecha { margin-left: auto; text-align: right; }
.inf__fecha__k {
  display: block; font-size: 7.4pt; color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
.inf__fecha__v { font-size: 9.6pt; font-weight: 700; }
.inf__fecha__v.inf__numero { display: block; margin-bottom: 1.5mm; }

/* ---------- identificación de la faena ---------- */
.inf__ident {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm;
  border: .5pt solid var(--linea); border-radius: 2mm;
  padding: 2.5mm; margin-bottom: 3mm; background: var(--fondo-cab);
}
.inf__ident__k {
  display: block; font-size: 7.4pt; color: var(--tinta-3);
  font-weight: 700; margin-bottom: .8mm;
}
.inf__ident__v { font-size: 9pt; font-weight: 700; }

/* ---------- revisión previa del equipo ----------

   Puede ocupar más de una hoja: el corte se permite entre grupos, pero
   nunca en medio de la tabla de un sistema. Los estados llevan texto y
   símbolo además de color para seguir siendo inequívocos impresos en
   escala de grises. */
.inf__revision {
  break-inside: auto !important;
  border: .6pt solid var(--linea); border-radius: 2mm;
  padding: 2.5mm 3mm; margin-bottom: 3.5mm;
}
.inf__revision > .inf__h2 { margin-bottom: 2mm; }
.inf__revision__grupo {
  break-inside: avoid; margin-bottom: 2.5mm;
}
.inf__revision__grupo:last-child { margin-bottom: 0; }
.inf__revision__h3 {
  padding: 1.2mm 2mm;
  border-left: 1.1mm solid var(--verde);
  background: var(--fondo-cab); color: var(--azul);
  font-size: 8.5pt; font-weight: 800;
}
.inf__revision__tabla { table-layout: fixed; }
.inf__revision__tabla th:nth-child(1) { width: 38%; }
.inf__revision__tabla th:nth-child(2) { width: 16%; }
.inf__revision__tabla th:nth-child(3) { width: 17%; }
.inf__revision__tabla th:nth-child(4) { width: 29%; }
.inf__revision__tabla tbody th {
  padding: 1.3mm 2mm; border-bottom: .3pt solid var(--linea);
  background: #fff; color: var(--tinta); text-align: left;
  font-size: 8.1pt; font-weight: 700; vertical-align: top;
}
.inf__revision__tabla td { vertical-align: top; overflow-wrap: anywhere; }
.inf__revision__valor--texto { white-space: normal; overflow-wrap: anywhere; }
.inf__revision__valor--medida { white-space: nowrap; }
.inf__revision__observacion { white-space: pre-wrap; }
.inf__estado {
  display: inline-flex; align-items: center; gap: 1mm;
  padding: .5mm 1.4mm; border: .6pt solid currentColor;
  border-radius: 99mm; font-size: 7.5pt; font-weight: 800;
  line-height: 1.2; white-space: nowrap;
}
.inf__estado::before { font-weight: 900; }
.inf__estado--bueno { color: #166534; background: #F0FDF4; }
.inf__estado--bueno::before { content: '✓'; }
.inf__estado--regular { color: #92400E; background: #FFFBEB; }
.inf__estado--regular::before { content: '!'; }
.inf__estado--malo { color: #991B1B; background: #FEF2F2; }
.inf__estado--malo::before { content: '×'; }
.inf__estado--no_aplica,
.inf__estado--otro { color: #475569; background: #F8FAFC; }
.inf__estado--no_aplica::before { content: '–'; }
/* ---------- bloque de una herramienta ---------- */
.inf__bloque {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 5mm;
  align-items: start;
}
.inf__sub {
  font-size: 7.6pt; font-weight: 800; color: var(--tinta-3);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1mm;
}
.inf__unidad { font-weight: 600; color: var(--tinta-2); font-size: 8pt; }

/* Una sola columna, aunque quede hueco al lado.
   Se probó en dos: gana once milímetros de alto y a cambio parte
   «Volumen de vegetación» y «Tiempo por hectárea» en tres líneas cada
   uno. Para alguien de sesenta años leyendo al sol, el hueco blanco es
   mucho menos molesto que la etiqueta troceada. */
.inf__salidas { display: grid; gap: 1.6mm; }
.inf__salida {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 3mm; padding: 1.4mm 2.5mm;
  border-left: 1.2mm solid var(--verde);
  background: #F0FDF4; border-radius: 0 1.5mm 1.5mm 0;
}
.inf__salida__k { font-size: 8.4pt; font-weight: 600; }
.inf__salida__v {
  font-size: 10.4pt; font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.inf__salida__v small { font-size: 7.6pt; font-weight: 600; color: var(--tinta-2); }

/* ---------- fórmula ---------- */
.inf__formula {
  display: flex; gap: 4mm; align-items: center;
  border: .8pt solid var(--linea); border-radius: 2mm;
  padding: 2.5mm; margin-bottom: 2mm; background: var(--fondo-cab);
}
.inf__formula__eq {
  display: flex; align-items: center; gap: 1.5mm;
  font-size: 9.4pt; font-weight: 700;
  /* Sin esto la ecuación se parte y el «600 × Q» cae a otra línea,
     separado de su divisor: deja de leerse como una fracción. */
  flex: none; white-space: nowrap;
}
.inf__frac { display: inline-block; text-align: center; }
.inf__frac__a { display: block; padding: 0 2mm .5mm; border-bottom: 1pt solid var(--tinta); }
.inf__frac__b { display: block; padding-top: .5mm; }
.inf__donde { list-style: none; font-size: 8pt; }
.inf__donde li { margin-bottom: .6mm; }

/* ---------- esquema de montaje ---------- */
.inf__montaje {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 4mm; align-items: center;
}
.inf__montaje__dibujo {
  border: .8pt solid var(--linea); border-radius: 2mm;
  padding: 2mm; background: #F7FBFF;
}
.esquema { width: 100%; height: auto; max-height: 44mm; display: block; }
.inf__color {
  display: inline-block; width: 5mm; height: 5mm;
  border: .5pt solid var(--tinta); border-radius: 50%;
}
.inf__montajes { display: grid; gap: 3mm; }
.inf__montaje-config {
  padding: 2.5mm; border: .5pt solid var(--linea); border-radius: 2mm;
  break-inside: avoid;
}
.inf__montaje__tabla tbody th {
  padding: 1.3mm 2mm; border-bottom: .3pt solid var(--linea);
  background: #fff; color: var(--tinta); font-size: 8pt;
}
.inf__montaje__tabla th:nth-child(1) { width: 25mm; }
.inf__montaje__tabla th:nth-child(2) { width: 20mm; }
.inf__montaje__boquilla { display: inline-flex; align-items: center; gap: 2mm; }
.inf__montaje__tabla .inf__color { width: 3.8mm; height: 3.8mm; flex: none; }

/* ---------- pie ---------- */
.inf__pie-pag {
  margin-top: 6mm; padding-top: 2.5mm;
  border-top: 1.5pt solid var(--azul);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 6mm; font-size: 7.4pt; color: var(--tinta-2);
}
.inf__pagina__n { font-weight: 800; color: var(--azul); white-space: nowrap; }

/* ============================================================
   Papel

   Se oculta la app entera y queda sólo el informe. `size: A4` fija la
   hoja; sin eso el navegador usa la del sistema y los milímetros de
   arriba dejan de calzar. El margen va en 0 porque el relleno ya está
   en `.inf__pagina`: sumar los dos deja el contenido corrido.
   ============================================================ */
@media print {
  @page { size: A4; margin: 0; }

  .topbar, .dock, .fab, .fan, .sheet, .avisos, .inf__acciones { display: none !important; }

  html, body { background: #fff; }
  .view { padding: 0 !important; max-width: none !important; }

  .inf__pagina {
    box-shadow: none; margin: 0;
    width: auto; min-height: 0;
    padding: 12mm 11mm;
  }

  /* Lo que de verdad importa al cortar: que una sección no quede
     partida entre dos hojas, y que el esquema no se separe de su
     tabla de colores. */
  .inf__sec, .inf__bloque, .inf__montaje, .inf__ident { break-inside: avoid; }
  .inf__sec--partible { break-inside: auto; }
  .inf__montaje-config { break-inside: avoid; }
  .inf__cab { break-after: avoid; }

  /* Los fondos de color son parte de la información —el estado del
     aforo, la fila de la boquilla mala—, no decoración. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* En pantalla chica la hoja no cabe: se deja desplazar en horizontal
   antes que encoger la letra hasta lo ilegible. */
@media screen and (max-width: 216mm) {
  .inf { overflow-x: auto; }
  .inf__pagina { transform-origin: top left; }
}

/* ---------- datos compartidos por varias herramientas ---------- */
.inf__comunes {
  border: .8pt solid var(--linea); border-radius: 2mm;
  padding: 2.5mm 3mm; margin-bottom: 3.5mm; background: var(--fondo-cab);
}
.inf__comunes__lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(38mm, 1fr));
  gap: 2mm 4mm; margin-top: 1mm;
}
.inf__comunes__it { display: flex; justify-content: space-between; gap: 2mm; align-items: baseline; }
.inf__comunes__k { font-size: 8.2pt; color: var(--tinta-2); }
.inf__comunes__v { font-size: 9.4pt; font-weight: 800; white-space: nowrap; }
.inf__comunes__v small { font-size: 7.4pt; font-weight: 600; color: var(--tinta-2); }

/* Una herramienta cuyos datos ya salieron todos en la franja común:
   queda sólo el resultado y ocupa el ancho entero. */
.inf__bloque--solo { grid-template-columns: 1fr; }

/* Observaciones y recomendaciones escritas para esta calibración. */
.inf__notas {
  margin-top: 3mm;
}
.inf__notas__item {
  border-left: 1.2mm solid var(--verde);
  background: #F0FDF4; border-radius: 0 2mm 2mm 0;
  padding: 2.5mm 3mm;
}
.inf__notas__item h2 {
  margin-bottom: 1mm; color: var(--azul);
  font-size: 8pt; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em;
  break-after: avoid;
}
.inf__notas__item p {
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 8.4pt;
}

/* ============================================================
   Versión compacta: una calibración corriente en una hoja.

   No encoge la letra —seguiría siendo el mismo informe, ilegible—.
   Reparte: las herramientas se ponen de a dos por fila y dentro de cada
   una los datos van sobre el resultado en vez de al lado. Así se llenan
   los huecos que dejaba la columna corta junto a la larga, que era de
   donde salía casi todo el alto sobrante.
   ============================================================ */

.inf__tools { display: grid; gap: 0 5mm; }

.inf--compacto .inf__tools {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

/* Si las secciones son impares, la última queda sola y deja media fila
   vacía. En vez de eso se estira a lo ancho y recupera la disposición
   de datos junto a resultados, que es la que mejor usa ese espacio.

   Se probó a repartirlas en tres columnas: llenaba la fila pero partía
   «Volumen de vegetación (TRV)» y «Velocidad promedio del aire a la
   salida» en tres líneas. Un hueco blanco se perdona; una etiqueta
   troceada, no. */
.inf--compacto .inf__tools > .inf__sec:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.inf--compacto .inf__tools > .inf__sec:last-child:nth-child(odd) .inf__bloque {
  grid-template-columns: 1.15fr 1fr;
  gap: 5mm;
}
/* Sus resultados siguen en una columna. Se probó ponerlos en dos
   aprovechando el ancho y volvió a pasar lo de siempre: «Tiempo por
   hectárea» y «Capacidad de trabajo» partidos en dos líneas. Es la
   tercera vez que se intenta rellenar un hueco a costa del texto; queda
   escrito para no intentarlo una cuarta. */
/* Datos sobre resultado: en media hoja de ancho no caben lado a lado
   sin partir las etiquetas. */
.inf--compacto .inf__bloque { grid-template-columns: 1fr; gap: 1.5mm; }
.inf--compacto .inf__sec { margin-bottom: 2mm; }
.inf--compacto .inf__salida { padding: 1.1mm 2mm; }
.inf--compacto .inf__salidas { gap: 1.2mm; }

/* El esquema cruza las dos columnas y se achica: sigue leyéndose porque
   lo que importa es el orden de los colores, no el detalle del dibujo. */
.inf--compacto .inf__sec--ancha { grid-column: 1 / -1; }
.inf--compacto .esquema { max-height: 34mm; }
.inf--compacto .inf__montaje { grid-template-columns: 1fr 1.15fr; gap: 3mm; }
/* Datos de la configuración a la izquierda de su dibujo y su tabla. */
.inf__montaje--con-datos,
.inf--compacto .inf__montaje--con-datos { grid-template-columns: 66mm .75fr 1.2fr; gap: 3mm; }
/* Son etiquetas de fila, no cabeceras: sin el fondo azul de `.inf__tabla th`. */
.inf__config-datos th {
  background: #fff; color: var(--tinta-2);
  font-size: 7.4pt; font-weight: 600; line-height: 1.2;
  padding: 1mm 1.5mm 1mm 0; border-bottom: .3pt solid var(--linea);
}
.inf__config-datos td { padding: 1mm 0 1mm 1.5mm; white-space: nowrap; }
.inf__montaje--con-datos .inf__montaje__tabla th:nth-child(1) { width: 18mm; }
.inf__montaje--con-datos .inf__montaje__tabla th:nth-child(2) { width: 15mm; }

.inf--compacto .inf__notas { margin-top: 2mm; }
.inf--compacto .inf__notas__item { padding: 2mm 2.5mm; }
.inf--compacto .inf__ident { padding: 2mm 2.5mm; margin-bottom: 2.5mm; }
.inf--compacto .inf__comunes { padding: 2mm 2.5mm; margin-bottom: 2.5mm; }
.inf--compacto .inf__revision { padding: 2mm 2.5mm; margin-bottom: 2.5mm; }

/* ---------- comparación de opciones de boquillas ---------- */
.inf__rendimiento { margin-bottom: 2.5mm; }
.inf__sub--tabla { margin-top: 2.5mm; }

.inf__opciones {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  gap: 4mm; margin-top: 3mm;
}
.inf__opcion__t {
  font-size: 8.6pt; font-weight: 800; color: var(--azul);
  margin-bottom: 1mm;
}
.inf__opcion__ley { margin-top: 1.5mm; }
.inf__opcion__fila {
  display: flex; align-items: center; gap: 2mm;
  font-size: 8pt; margin-bottom: .8mm;
}
.inf__opcion__fila .inf__color { width: 3.6mm; height: 3.6mm; flex: none; }

/* En una hoja, los dos esquemas comparten el ancho: cada uno va a la
   mitad, así que se dibujan más bajos. Lo que hay que leer en ellos es
   el orden de los colores en el arco, no el detalle del dibujo. */
.inf--compacto .inf__opcion .esquema { max-height: 30mm; }
.inf--compacto .inf__opciones { gap: 3mm; margin-top: 2mm; }

/* La identificación pasó de cuatro campos a cinco, dos de ellos con
   marca, modelo y una tercera cosa: hace falta más ancho por campo. */
.inf__ident { grid-template-columns: repeat(4, 1fr); }
