/* ---------------------------------------------------------------- línea de empaque (pages/empaque.js) */

.em-top { flex-wrap: wrap; }
.em-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.em-cols .card-h, .em .card.flush > .card-h { padding: 16px 18px 0; margin: 0; }
.em .card-h h2 { font-size: 17px; }
.em-body { padding: 12px 18px 18px; display: grid; gap: 12px; }
.em h3 { margin: 0 0 8px; font-size: 12px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.em h3 span { color: var(--ink); letter-spacing: 0; text-transform: none; font-weight: 550; margin-left: 4px; }
.em-vacio { padding: 40px; text-align: center; }

/* elegir lote, mesa y corte */
.em-sel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.em-sel .em-mesa-l { grid-column: 1 / -1; }
.em-sel label, .em-corte { display: grid; gap: 5px; font-size: 12.5px; color: var(--ink-3); min-width: 0; }
.em-sel select, .em-corte select { font-size: 15px; }
.em-mesas { flex-wrap: wrap; justify-self: start; }
.em-mesas button { min-width: 38px; font-variant-numeric: tabular-nums; }

/* el peso, grande, y el calibre que sale solo */
.em-peso { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; background: var(--surface-2); border-radius: 16px; padding: 16px 18px; transition: opacity .15s; }
.em-peso.apagado { opacity: .45; }
.em-kg { font-size: clamp(44px, 7vw, 68px); font-weight: 650; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; transition: color .15s; }
.em-kg small { font-size: 18px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.em-kg.mueve { color: var(--ink-3); }
.em-cal { display: grid; align-content: center; justify-items: center; min-width: 108px; padding: 8px 14px; border-radius: 12px; background: var(--brand); color: var(--brand-ink, #fff); transition: background .15s; }
.em-cal small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.em-cal b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.em-cal.vacio { background: var(--surface); color: var(--ink-3); box-shadow: 0 0 0 1px var(--line) inset; }
.em-estado { color: var(--ink-3); margin-top: -4px; }
.em-acc { display: flex; gap: 8px; }
.em-acc input { flex: 1; min-width: 0; font-size: 20px; font-variant-numeric: tabular-nums; text-align: right; }
.em-acc .em-grande { flex: 1; }
.em-grande { min-height: 48px; font-size: 16px; font-weight: 600; border-radius: 12px; }
.em-auto { color: var(--ink-2); }

/* las últimas piezas */
.em-ult { border-top: 1px solid var(--line); padding: 14px 18px 12px; }
.em-ult ul, .em-piezas { list-style: none; margin: 0; padding: 0; }
.em-ult li, .em-piezas li { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.em-ult li:first-child, .em-piezas li:first-child { border-top: 0; }
.em-ult li b, .em-piezas li b { font-variant-numeric: tabular-nums; font-weight: 560; white-space: nowrap; }
.em-ult li span, .em-piezas li span { color: var(--ink-3); }   /* el corte y la mesa, enteros, nunca con puntos suspensivos */
/* con la columna angosta (iPad, celular, el asistente abierto) el corte y la mesa van debajo del código de la pieza */
@media (max-width: 1240px) {
  .em-ult li, .em-piezas li { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 1px; }
  .em-ult li > span, .em-piezas li > span { grid-column: 1; grid-row: 2; font-size: 12px; }
}
.em-ult li b, .em-piezas li b, .em-ult em, .em-piezas em { white-space: nowrap; }
.em-ult em, .em-piezas em { font-style: normal; font-variant-numeric: tabular-nums; }
.em-piezas { max-height: 260px; overflow: auto; }
.em-piezas li.muted { display: block; color: var(--ink-3); }
.em-x { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; color: var(--ink-3); border-radius: 50%; cursor: pointer; }
.em-x:hover { background: var(--bad-soft); color: var(--bad); }
.em-x svg { width: 14px; height: 14px; }

/* la caja en armado */
.em-caja.sin .em-body { text-align: center; justify-items: center; padding: 28px 24px 30px; }
.em-nueva p { max-width: 36ch; margin: 0; }
.em-scan { display: flex; gap: 8px; }
.em-scan input { flex: 1; min-width: 0; font-size: 17px; letter-spacing: .02em; padding-top: 11px; padding-bottom: 11px; }
.em-msg { padding: 10px 12px; border-radius: 12px; font-size: 13.5px; background: var(--surface-2); animation: em-entra .18s ease-out; }
.em-msg.ok { background: var(--ok-soft); color: var(--ok); font-weight: 560; }
.em-msg.mal { background: var(--bad-soft); color: var(--bad); font-weight: 560; }
.em-msg.aviso { background: var(--warn-soft); color: var(--warn); }
@keyframes em-entra { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .em-msg { animation: none; } }
.em-cuenta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.em-cuenta > div { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; display: grid; gap: 1px; min-width: 0; }
.em-cuenta small { font-size: 12px; color: var(--ink-3); }
.em-cuenta b { font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.em-cuenta b span { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.em-pesaje { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; }
.em-pesaje h3 { margin: 0; }
.em-pf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.em-pf label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-3); min-width: 0; }
.em-pf input { font-size: 17px; text-align: right; font-variant-numeric: tabular-nums; }
.em-pf b { font-size: 20px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; padding: 6px 0; }
.em-ctl { display: flex; gap: 8px; align-items: center; padding: 11px 13px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); font-size: 13.5px; }
.em-ctl.ok { background: var(--ok-soft); color: var(--ok); font-weight: 560; }
.em-ctl.mal { background: var(--bad-soft); color: var(--bad); font-weight: 560; }
.em-ctl svg { flex: none; }
.em-cierre { display: flex; gap: 8px; }
.em-cierre .em-grande { flex: 1; }
.em-otras { border-top: 1px solid var(--line); padding: 12px 18px 14px; color: var(--ink-2); }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--brand); cursor: pointer; }
.linkish:hover { text-decoration: underline; }

/* producción por mesa */
.em-mesa-t { padding: 0 0 6px; }
.em-mesa { display: grid; grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(56px, .7fr)) minmax(80px, 1.2fr); gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.em-mesa.h { border-top: 0; font-size: 12px; color: var(--ink-3); padding-top: 4px; padding-bottom: 6px; }
.em-mesa .num { text-align: right; font-variant-numeric: tabular-nums; }
.em-mesa b { display: block; font-weight: 600; }
.em-mesa small { display: block; font-size: 12px; color: var(--ink-3); }
.em-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.em-bar i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.em-puestos { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 2px; }
.em-puestos > div { background: var(--surface-2); border-radius: 12px; padding: 10px 14px; display: grid; min-width: 120px; }
.em-puestos b { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.em-puestos span { font-size: 12.5px; color: var(--ink-3); }

/* mesas, calibres y reglas */
.em-aj { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 22px; }
.em-aj section:last-child { grid-column: 1 / -1; }
.em-aj-l { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.em-aj-l li { display: flex; gap: 8px; align-items: center; }
.em-aj-l li b { width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.em-aj-l li input:not([type="checkbox"]) { flex: 1; min-width: 0; }
.em-aj-l li input.num { flex: 0 0 76px; text-align: right; }
.em-aj-l li span { color: var(--ink-3); font-size: 13px; }
.em-aj-t { width: 100%; }
.em-aj-t input.num { width: 72px; text-align: right; }

/* la media que entra por una mesa (Desposte → el lote) */
.de-mesa { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; color: var(--ink-3); flex-wrap: wrap; }

@media (max-width: 1100px) {
  .em-cols { grid-template-columns: 1fr; }
  .em-mesa { grid-template-columns: minmax(110px, 1.4fr) repeat(5, minmax(48px, .7fr)); }
  .em-mesa .em-bar, .em-mesa.h span:last-child { display: none; }
}
@media (max-width: 767px) {
  .em-sel { grid-template-columns: 1fr; }
  .em-body { padding: 10px 14px 16px; }
  .em-cols .card-h, .em .card.flush > .card-h { padding: 14px 14px 0; }
  .em-ult { padding: 12px 14px; }
  .em-kg { font-size: 48px; }
  .em-cal { min-width: 88px; }
  .em-cal b { font-size: 22px; }
  .em-mesa { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(44px, .7fr)); padding: 10px 14px; gap: 8px; }
  .em-mesa > :nth-child(4), .em-mesa > :nth-child(5) { display: none; }
  .em-aj { grid-template-columns: 1fr; }
  .em-aj-t { display: block; overflow-x: auto; }
}