/* Estilos de la PWA de planta, portados del POC de verde: light-only (fondo
 * claro y alto contraste para exteriores), system-ui (offline estricto: cero
 * requests a terceros), objetivos táctiles grandes (guantes). */

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
html {
	color-scheme: light;
}
body {
	margin: 0;
	background: #ffffff;
	color: #10160e;
	font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
/* Acotado a la pantalla SIEMPRE, no solo con el teclado a la vista: lo único que
   scrollea es `.cuerpo`, así que «Atrás» y «Siguiente» quedan fijos abajo en todas
   las pantallas. Con `min-height` la columna crecía con el contenido y el pie se iba
   al final del scroll — con los 31 silos de producción había que recorrer la grilla
   entera para encontrar el botón (visto en la planta el 10/9/2026). */
#app {
	display: flex;
	flex-direction: column;
	height: 100dvh;
	min-height: 0;
	max-width: 480px;
	margin: 0 auto;
}

/* ── encabezado ─────────────────────────────────────────────────────────── */
.encabezado {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: calc(10px + env(safe-area-inset-top)) 18px 8px;
	border-bottom: 1px solid #edf0e6;
	user-select: none;
}
.marca {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 14px;
	touch-action: none;
}
.marca b {
	font-weight: 700;
	text-transform: capitalize;
}
.horita {
	color: #59634f;
	font-variant-numeric: tabular-nums;
}
/* Legibilidad al sol (revisión de diseño 7/9/2026, T3): nada informativo bajo 14 px
 * ni bajo 4,5:1 de contraste, y lo deshabilitado tiene que seguir leyéndose. */
.quienes {
	color: #14602e;
	font-size: 14px;
	font-weight: 600;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.derecha {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 7px;
}
.pill-off {
	background: #fdf3e0;
	color: #8a5200;
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 14px;
	font-weight: 600;
}
/* Es la puerta a «lo cargado» (en verde, la única): objetivo táctil de 40 px dentro del encabezado. */
.pill-cola {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 40px;
	background: #eaf4ea;
	color: #14602e;
	border: 1.5px solid #bedcbf;
	border-radius: 999px;
	padding: 0 13px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
.pill-cola.alerta {
	background: #fbe9e4;
	color: #8c2e10;
	border-color: #efc2b2;
}

/* ── progreso y cuerpo ──────────────────────────────────────────────────── */
.dots {
	display: flex;
	gap: 5px;
	padding: 8px 18px 0;
}
.dots i {
	height: 4px;
	flex: 1;
	background: #e4e9db;
	border-radius: 2px;
}
.dots i.on {
	background: #1b7a3c;
}
.cuerpo {
	flex: 1;
	/* Sin esto, un flex-item no encoge por debajo de su contenido y el overflow no
	   llega a activarse: el pie se iría empujado fuera de la pantalla. */
	min-height: 0;
	overflow-y: auto;
	padding: 14px 18px 8px;
}
.pie {
	display: flex;
	gap: 10px;
	padding: 10px 18px calc(16px + env(safe-area-inset-bottom));
	border-top: 1px solid #edf0e6;
	background: #fff;
}
.pie:empty {
	display: none;
}
.appbody {
	padding: 0;
}

/* ── pregunta ───────────────────────────────────────────────────────────── */
.qrow {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 14px;
}
.q {
	font-size: 25px;
	line-height: 1.18;
	font-weight: 700;
	letter-spacing: -0.02em;
	flex: 1;
}
.qsub {
	font-size: 14.5px;
	color: #59634f;
	margin: -6px 0 14px;
	line-height: 1.35;
}
/* La misma letra pero DESPUÉS de una grilla o un ticket: el margen negativo de arriba
   es para pegarse a la pregunta, y acá lo dejaba tocando los botones. */
.qsub.despues {
	margin-top: 12px;
}
.arriba {
	margin-top: 14px;
}
.centrado {
	text-align: center;
}

/* ── tiles y opciones ───────────────────────────────────────────────────── */
.grid2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px;
}
/* Tres columnas: los silos del 1 al 32, los turnos y la fila de acciones del
   inicio de producción. Con 32 botones, dos columnas obligaban a hacer scroll
   para ver el silo que se busca. */
.grid3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 9px;
}
/* Los 32 silos: cuatro columnas de tiles bajos entran en una pantalla y poco; con tres eran dos y media. */
.grid4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}
/* La tarjeta de un silo abierto ocupa el ancho: número, precinto y último peso. */
.tile.ancho {
	width: 100%;
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: 12px;
}
.tile.ancho > span {
	flex: 1;
	min-width: 0;
}
/* El peso del silo, a la derecha y con nombre: el bruto grande, el neto (o la tara) abajo. */
.tile.ancho > span.peso {
	flex: none;
	text-align: right;
	white-space: nowrap;
}
.tile.ancho .peso b {
	display: block;
	font-size: 19px;
	line-height: 1.1;
}
.tile.ancho .peso small {
	font-size: 13px;
	margin-top: 2px;
}
/* El verbo de la tarjeta del inicio de producción: tocarla es cerrar el silo. */
.tile.ancho .peso .verbo {
	color: #1b7a3c;
	font-weight: 700;
	font-size: 13px;
	margin-top: 4px;
}
.grid1 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 11px;
}
.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 120px;
	padding: 13px 9px;
	border: 2px solid #dde4d2;
	background: #fff;
	border-radius: 16px;
	cursor: pointer;
	font-size: 17.5px;
	font-weight: 600;
	color: #10160e;
	text-align: center;
	width: 100%;
	line-height: 1.2;
	font-family: inherit;
}
.tile small {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #59634f; /* la tara es un dato que se lee, no decoración */
	margin-top: 3px;
}
.tile:active {
	transform: scale(0.985);
}
.tile[aria-pressed='true'] {
	border-color: #1b7a3c;
	background: #eaf4ea;
}
.tile[disabled] {
	/* Sin opacidad: al sol se pierde. Fondo apagado, texto pleno y el subtítulo en ámbar. */
	background: #f2f5ec;
	color: #3d4a38;
	cursor: not-allowed;
}
.tile[disabled] small {
	color: #7a4b00;
}
.tile .tick {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid #cfd8c4;
	background: #fff;
	display: grid;
	place-items: center;
	color: #fff;
}
.tile .tick svg {
	opacity: 0;
}
.tile[aria-pressed='true'] .tick {
	background: #1b7a3c;
	border-color: #1b7a3c;
}
.tile[aria-pressed='true'] .tick svg {
	opacity: 1;
}
.tile .badge {
	position: absolute;
	top: 8px;
	left: 8px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: #eef2e6;
	color: #59634f;
	border-radius: 99px;
	padding: 3px 8px;
}
.av {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	flex: none;
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 700;
	font-size: 19px;
}
/* Grillas largas (silos, motivos): tiles de 84 px, el mínimo con guantes, para que entren
 * en una pantalla en vez de dos y media (revisión del 12/9; el POC los tenía de 72). */
.tile.chico {
	min-height: 84px;
	padding: 8px 6px;
	gap: 4px;
}
.tile.chico .cuadro {
	width: 44px;
	height: 44px;
	font-size: 20px;
}
.tile.chico .tick {
	width: 22px;
	height: 22px;
	top: 6px;
	right: 6px;
}
.cuadro {
	width: 52px;
	height: 52px;
	border-radius: 13px;
	flex: none;
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 700;
	font-size: 25px;
}
.opt {
	display: flex;
	align-items: center;
	gap: 13px;
	min-height: 70px;
	padding: 13px 15px;
	border: 2px solid #dde4d2;
	background: #fff;
	border-radius: 16px;
	font-size: 19px;
	font-weight: 600;
	color: #10160e;
	cursor: pointer;
	text-align: left;
	width: 100%;
	font-family: inherit;
}
.opt.grande {
	min-height: 86px;
	font-size: 21px;
}
.opt:active {
	transform: scale(0.985);
}
.opt.sel {
	border-color: #1b7a3c;
	background: #eaf4ea;
	box-shadow: inset 0 0 0 1px #1b7a3c;
}

/* ── botones ────────────────────────────────────────────────────────────── */
.btn {
	flex: 1;
	min-height: 62px;
	border-radius: 16px;
	border: none;
	font-size: 19px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: inherit;
}
.btn.go {
	background: #1b7a3c;
	color: #fff;
}
.btn.go:active {
	background: #14602e;
}
.btn.go[disabled] {
	/* Se ve que hay un botón y que falta algo: 2:1 de contraste desaparecía al sol. */
	background: #f2f5ec;
	color: #59634f;
	border: 1.5px solid #cfd8c4;
	cursor: not-allowed;
}
.btn.ghost {
	flex: none;
	width: 62px;
	background: #f2f5ec;
	color: #3d4a38;
	border: 1.5px solid #dde4d2;
}
.btn.ancho {
	width: 100%;
	flex: none;
	margin-top: 12px;
}
.btn.anchoflex {
	flex: 1;
	width: auto;
}
.btn.chico {
	min-height: 48px;
	font-size: 15px;
	margin-top: 10px;
}
/* Las acciones del inicio de producción, de a dos por fila: el nombre arriba y qué es
   abajo. Mismo fondo que el «volver»; apagadas sin opacidad, que al sol se pierde. */
.btn.accion {
	flex-direction: column;
	gap: 2px;
	min-height: 64px;
	padding: 8px 10px;
	font-size: 17px;
	line-height: 1.15;
	background: #f2f5ec;
	color: #1f2a1c;
	border: 1.5px solid #dde4d2;
}
.grid2.acciones {
	margin-top: 4px;
}
.btn.accion small {
	font-size: 13px;
	font-weight: 500;
	color: #59634f;
}
.btn.accion:active {
	background: #e3ebdc;
}
/* Apagado sin opacidad, como los tiles: al sol el gris claro (2,9:1) desaparecía. */
.btn.accion[disabled] {
	color: #3d4a38;
	border-color: #e6ebe0;
	cursor: not-allowed;
}
.btn.accion[disabled] small {
	color: #7a4b00;
}
/* Objetivos táctiles (T4): el piso es 48 px. Las acciones secundarias que eran texto
 * subrayado de 20 px («Se va descarte al monte», «¿pesó dos viajes juntos?», «seguir
 * sin foto», «agregar una nota») pasan a chip de borde punteado, ancho completo. */
.enlace {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin-top: 10px;
	padding: 0 16px;
	border: 1.5px dashed #bccab3;
	border-radius: 14px;
	background: #fff;
	color: #1b7a3c;
	font-size: 15.5px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
}
.enlace:active {
	background: #eaf4ea;
}

/* mantener apretado */
.hold {
	position: relative;
	overflow: hidden;
	touch-action: none;
}
.hold .fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: #14602e;
	z-index: 0;
}
.holdlab {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 9px;
}

/* ── teclado y lector ───────────────────────────────────────────────────── */
/* Un solo teclado para las tres estaciones (T1): 1–9 y abajo borrar · 0 · contexto.
 * 64 px de alto y 10 px de separación: con guantes de nitrilo el dedo cubre 18–20 mm. */
.keys {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 12px;
}
.key {
	height: 64px;
	border-radius: 14px;
	border: 1.5px solid #cfd8c4;
	background: #fff;
	font-size: 28px;
	font-weight: 600;
	color: #10160e;
	cursor: pointer;
	font-family: inherit;
}
.key:active {
	background: #eaf4ea;
}
/* El cero ocupa dos columnas y el borrar queda a su derecha, como en el POC. */
.key.cero {
	grid-column: span 2;
}
/* La única tecla que quita algo: el rojo de los avisos de detener. */
.key.borrar {
	background: #fbe9e4;
	border-color: #efc2b2;
	color: #8c2e10;
	font-size: 24px;
}
.key.borrar:active {
	background: #f6d9d0;
}

/* Pad anclado (V1): pregunta y lector fijos arriba, teclado y pie fijos abajo, y solo la
 * franja del medio (barra, avisos, «Sí / Lo corrijo», pesada dividida, reloj) hace scroll.
 * El pad nunca se mueve bajo el dedo y nunca hay que buscarlo. */
.cuerpo.con-pad {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 0;
	overflow: hidden;
}
.appbody.con-pad {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
/* `.zona` agrupa arriba + medio: en pantalla normal no existe para el layout. */
.con-pad .zona {
	display: contents;
}
.con-pad .fijo-arriba {
	padding: 12px 18px 0;
}
.con-pad .medio {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 8px 18px 4px;
}
.appbody.con-pad .keys {
	margin: 0;
	padding: 8px 18px 0;
	border-top: 1px solid #edf0e6;
	background: #fafbf6;
}
.pie.con-pad {
	border-top: none;
	background: #fafbf6;
}
/* La franja del medio es corta (unos 150 px en un teléfono de 812): el cartel y el
 * «Sí, está bien» tienen que entrar juntos sin scroll, así que ahí todo va más justo
 * y el pad anclado cede unos px por tecla. */
.appbody.con-pad .key {
	height: 58px;
}
.con-pad .medio .flag {
	margin-top: 4px;
	padding: 10px 13px;
}
.con-pad .medio .chips.arriba {
	margin-top: 8px;
}
.con-pad .medio .chip {
	min-height: 48px;
}
/* En un teléfono bajo, el lector y las teclas ceden antes que la franja del medio:
 * ahí viven los carteles y el «Sí, está bien», y tienen que verse sin scroll. */
@media (max-height: 790px) {
	/* Arriba + medio hacen scroll juntos; el teclado y el pie siguen fijos. */
	.con-pad .zona {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 0;
		overflow-y: auto;
	}
	.con-pad .medio {
		flex: none;
		overflow: visible;
	}
	.con-pad .readout .big {
		font-size: 38px;
	}
	.con-pad .readout {
		padding: 10px 14px;
	}
	.appbody.con-pad .key {
		height: 54px;
		font-size: 25px;
	}
	.appbody.con-pad .keys {
		gap: 8px;
	}
}
.readout {
	background: #f2f5ec;
	border: 1.5px solid #dde4d2;
	border-radius: 16px;
	padding: 14px 16px;
	text-align: center;
}
.readout .big {
	font-size: 46px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.readout .unit {
	font-size: 20px;
	font-weight: 600;
	color: #59634f;
	margin-left: 6px;
}
.apagado {
	color: #b4bda8;
}
.calc {
	display: flex;
	justify-content: space-between;
	font-size: 14.5px;
	color: #3d4a38;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed #cfd8c4;
	font-variant-numeric: tabular-nums;
}
.bar {
	height: 12px;
	border-radius: 6px;
	background: #e9ede0;
	position: relative;
	margin: 12px 0 5px;
	overflow: hidden;
}
.bar .ok {
	position: absolute;
	top: 0;
	bottom: 0;
	background: #cde5ce;
}
.bar .mk {
	position: absolute;
	top: -4px;
	width: 4px;
	height: 20px;
	border-radius: 2px;
	background: #10160e;
	transform: translateX(-2px);
}
.barlab {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: #59634f;
	font-variant-numeric: tabular-nums;
}

/* ── avisos ─────────────────────────────────────────────────────────────── */
.flag {
	border-radius: 14px;
	padding: 13px 15px;
	font-size: 15.5px;
	line-height: 1.4;
	display: block;
	margin-top: 12px;
}
.flag b {
	font-weight: 700;
}
.flag.warn {
	background: #fdf3e0;
	color: #7a4b00;
	border: 1.5px solid #efd3a0;
}
.flag.stop {
	background: #fbe9e4;
	color: #8c2e10;
	border: 1.5px solid #efc2b2;
}
.flag.ok {
	background: #eaf4ea;
	color: #14602e;
	border: 1.5px solid #bedcbf;
}

/* ── reloj y chips ──────────────────────────────────────────────────────── */
.clock {
	text-align: center;
	background: #f2f5ec;
	border: 1.5px solid #dde4d2;
	border-radius: 16px;
	padding: 16px;
	margin-top: 12px;
}
.clock .t {
	font-size: 56px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.clock .ago {
	font-size: 14.5px;
	color: #59634f;
	margin-top: 7px;
}
.steppers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
	margin-top: 12px;
}
.stp {
	height: 56px;
	border-radius: 14px;
	border: 1.5px solid #dde4d2;
	background: #fff;
	font-size: 17px;
	font-weight: 600;
	color: #10160e;
	cursor: pointer;
	font-family: inherit;
}
.stp:active {
	background: #eaf4ea;
}
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}
.chip {
	min-height: 56px;
	padding: 0 18px;
	border-radius: 14px;
	border: 2px solid #dde4d2;
	background: #fff;
	font-size: 17px;
	font-weight: 600;
	color: #10160e;
	cursor: pointer;
	flex: 1 1 44%;
	font-family: inherit;
}
.chip.sel {
	border-color: #1b7a3c;
	background: #eaf4ea;
}
.chip.ancho {
	margin-top: 12px;
	width: 100%;
	flex: none;
}

/* ── resumen, ticket, listo ─────────────────────────────────────────────── */
.sum {
	border: 1.5px solid #dde4d2;
	border-radius: 18px;
	overflow: hidden;
}
.sum .r {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 8px 8px 15px;
	border-bottom: 1px solid #edf0e6;
}
.sum .r:last-child {
	border-bottom: none;
}
.sum .ic {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: #f2f5ec;
	display: grid;
	place-items: center;
	flex: none;
	color: #3d4a38;
}
.sum .lb {
	font-size: 14px;
	color: #59634f;
	font-weight: 500;
}
.sum .vl {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.sum .fix {
	margin-left: auto;
	min-height: 48px;
	background: none;
	border: none;
	color: #1b7a3c;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	padding: 10px 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-family: inherit;
}
.done {
	text-align: center;
	padding-top: 14px;
}
.done .ring {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background: #eaf4ea;
	display: grid;
	place-items: center;
	margin: 0 auto 16px;
	color: #1b7a3c;
}
.done h2 {
	font-size: 29px;
	font-weight: 700;
	letter-spacing: -0.025em;
	margin: 0;
}
.ticket {
	margin-top: 18px;
	border: 1.5px dashed #cfd8c4;
	border-radius: 16px;
	padding: 16px;
	background: #fafbf6;
	text-align: left;
}
.ticket .row {
	display: flex;
	justify-content: space-between;
	/* Un valor largo (el precinto con su silo y su lote) no se pega a la etiqueta. */
	gap: 12px;
	font-size: 15.5px;
	padding: 6px 0;
	font-variant-numeric: tabular-nums;
}
.ticket .row b {
	font-weight: 700;
}
.ticket .row.grandeticket {
	font-size: 19px;
}
.ticket.incidente {
	border-style: solid;
	border-color: #efc2b2;
	background: #fdf7f5;
}
.syncline {
	display: flex;
	align-items: center;
	gap: 9px;
	justify-content: center;
	margin-top: 16px;
	font-size: 14px;
	color: #59634f;
}
.ambar {
	color: #8a5200;
}

/* ── foto, campos ───────────────────────────────────────────────────────── */
.miniatura {
	display: block;
	width: 100%;
	max-height: 240px;
	object-fit: contain;
	border-radius: 14px;
	border: 1.5px solid #dde4d2;
	background: #f2f5ec;
	margin-bottom: 12px;
}
.campo {
	display: block;
	width: 100%;
	min-height: 58px;
	margin-top: 12px;
	padding: 0 16px;
	border: 2px solid #dde4d2;
	border-radius: 14px;
	font-size: 19px;
	font-weight: 600;
	font-family: inherit;
	color: #10160e;
	background: #fff;
}
.campo:focus {
	outline: 3px solid #1b7a3c;
	outline-offset: 1px;
}
.nota {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 12px 14px;
	border: 2px solid #dde4d2;
	border-radius: 14px;
	font-size: 16px;
	font-family: inherit;
	color: #10160e;
	resize: vertical;
}

/* ── valor propuesto (P4 / C4 de la revisión): todavía no cargado ───────── */
/* Un número que el sistema propone (la tara de la tarjeta anterior, «sobre 3,5 = 0»)
 * se ve en gris; el primer dígito lo reemplaza y borrar lo vacía. En negro = cargado. */
.readout .big.propuesto {
	color: #77816c;
}
.readout .pista {
	font-size: 14px;
	color: #59634f;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed #cfd8c4;
}

/* ── casillas del precinto (P5): dicen cuántos dígitos son, sin ejemplo en gris ── */
.casillas {
	display: flex;
	justify-content: center;
	gap: 6px;
	font-variant-numeric: tabular-nums;
}
.casilla {
	width: 38px;
	height: 54px;
	border-radius: 10px;
	background: #fff;
	border: 1.5px solid #cfd8c4;
	display: grid;
	place-items: center;
	font-size: 32px;
	font-weight: 700;
}
.casilla.activa {
	border: 2px solid #1b7a3c;
}
.casilla.opcional {
	background: #fafbf6;
	border-style: dashed;
}

/* ── calidad: la hoja de RE-Q-03 en el teléfono (boceto 7/9) ─────────────── */
/* Arriba de cada subpantalla: de qué silo es la hoja, con dos a medias a la vez. */
.ref {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px 10px;
	padding: 10px 14px;
	margin: -4px 0 12px;
	border: 1.5px dashed #cfd8c4;
	border-radius: 14px;
	background: #fafbf6;
	font-size: 14.5px;
	color: #59634f;
}
.ref b {
	font-size: 20px;
	color: #10160e;
	font-variant-numeric: tabular-nums;
}
/* Con el pad anclado, la referencia y las medidas ceden altura: la franja del medio
 * tiene que mostrar entero el aviso de la suma de tamices en un teléfono de 812 px. */
.con-pad .ref {
	padding: 6px 12px;
	margin: -4px 0 8px;
}
.con-pad .ref b {
	font-size: 17px;
}
.con-pad .medida .val {
	min-height: 48px;
	font-size: 24px;
}
/* La letra vigente en la cabecera de la hoja. */
.letra-cab {
	flex: none;
	font-size: 19px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 12px;
	border: 2px solid #dde4d2;
	color: #59634f;
	white-space: nowrap;
}
.letra-cab.con {
	border-color: #1b7a3c;
	background: #eaf4ea;
	color: #14602e;
}
.letra-cab.desc {
	border-color: #8c2e10;
	background: #fbe9e4;
	color: #8c2e10;
}
/* Los campos numéricos: se toca uno y el teclado le escribe. */
.medidas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.medidas.cuatro {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.medida {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.medida label {
	font-size: 14px;
	color: #59634f;
	font-weight: 500;
}
.medida .val {
	min-height: 54px;
	border: 1.5px solid #dde4d2;
	border-radius: 12px;
	background: #f7f9f2;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #10160e;
	cursor: pointer;
	font-family: inherit;
}
.medida .val.on {
	border-color: #1b7a3c;
	background: #eaf4ea;
	box-shadow: 0 0 0 3px #cde5ce;
}
.medida .val.mal {
	border-color: #efc2b2;
	background: #fbe9e4;
	color: #8c2e10;
}
.medida .val.propuesto {
	color: #77816c;
}
.medida .val small {
	font-size: 14px;
	color: #59634f;
	font-weight: 500;
	margin-left: 5px;
}
/* Los sí/no de palos y contaminación. */
.sino {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 60px;
	margin-top: 8px;
}
.sino label {
	font-size: 16px;
	font-weight: 600;
	color: #10160e;
}
.sino .chips {
	flex: none;
	width: 180px;
}
.chip.stopsel {
	border-color: #8c2e10;
	background: #fbe9e4;
	color: #8c2e10;
}
/* Un defecto por fila, cuatro segmentos: un toque, un estado (r. 66). */
.defs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}
.def {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	font-size: 15px;
	font-weight: 600;
	color: #10160e;
}
.def .nombre {
	flex: 1;
	min-width: 0;
}
/* La leyenda de los segmentos, pegada arriba de la lista: catorce filas scrollean y el
 * subtítulo se va con ellas. */
.def.leyenda {
	position: sticky;
	top: 0;
	z-index: 1;
	min-height: 26px;
	background: #fff;
}
.def.leyenda .rotulo {
	font-size: 11px;
	font-weight: 600;
	color: #59634f;
	text-align: center;
}
.segmentos {
	display: grid;
	grid-template-columns: repeat(4, 48px);
	gap: 4px;
	flex: none;
}
.segmento {
	height: 48px;
	border-radius: 10px;
	border: 2px solid #dde4d2;
	background: #fff;
	display: grid;
	place-items: center;
	font-size: 14px;
	font-weight: 600;
	color: #59634f;
	cursor: pointer;
	font-family: inherit;
}
.segmento.sel {
	font-weight: 700;
}
.segmento.sel[data-g='N'] {
	border-color: #1b7a3c;
	background: #eaf4ea;
	color: #14602e;
}
.segmento.sel[data-g='P'] {
	border-color: #e4c070;
	background: #fdf8ea;
	color: #5a3d00;
}
.segmento.sel[data-g='B'] {
	border-color: #d0664a;
	background: #fbe9e4;
	color: #8c2e10;
}
.segmento.sel[data-g='M'] {
	border-color: #8c2e10;
	background: #8c2e10;
	color: #fff;
}
/* La propuesta de la regla y las cuatro letras. */
.propuesta {
	border: 2px solid #1b7a3c;
	border-radius: 16px;
	padding: 14px;
	background: #eaf4ea;
}
.propuesta.sin {
	border-color: #e4c070;
	background: #fdf8ea;
}
.propuesta.desc {
	border-color: #d0664a;
	background: #fbe9e4;
}
.propuesta .lb {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #59634f;
}
.propuesta .letra {
	font-size: 48px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
}
.propuesta .por {
	font-size: 14px;
	color: #3d4a38;
	margin-top: 4px;
}
.letras {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 12px;
}
.letra-b {
	height: 58px;
	border-radius: 14px;
	border: 2px solid #dde4d2;
	background: #fff;
	font-size: 20px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	color: #10160e;
}
.letra-b.sel {
	border-color: #1b7a3c;
	background: #eaf4ea;
	color: #14602e;
}
.letra-b.sel.desc {
	border-color: #8c2e10;
	background: #fbe9e4;
	color: #8c2e10;
}
/* Una tarjeta de silo ya resuelta (muestreado): sin toque. */
.tile.ancho.hecho {
	background: #fafbf6;
	border-color: #e4e9db;
	cursor: default;
}

/* ── envasado (v5) ──────────────────────────────────────────────────────── */
/* Debajo de la tarjeta de un pallet, sus precintos: se lee como parte de la tarjeta. */
.cargas {
	margin: -7px 10px 0;
	padding: 8px 14px 6px;
	border: 1.5px dashed #dde4d2;
	border-top: none;
	border-radius: 0 0 14px 14px;
	background: #fafbf6;
	font-size: 14.5px;
	color: #3d4a38;
}
.cargas .c {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 4px 0;
	font-variant-numeric: tabular-nums;
}
.cargas .c b {
	font-weight: 700;
	color: #10160e;
}
/* El rótulo que va a quedar impreso: borde pleno y la partida arriba, grande. */
.ticket.rotulo {
	border: 2px solid #10160e;
	background: #fff;
}
.ticket.rotulo .partida {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: center;
	padding-bottom: 8px;
	margin-bottom: 6px;
	border-bottom: 1.5px solid #10160e;
	font-variant-numeric: tabular-nums;
}