:root {
  --navy: #0b1b4b;
  --navy-support: #1f3e8c;
  --lime: #c4e000;
  --ok: #2d6a1e;
  --warn: #8a5a10;
  --err: #8b1e2d;
  --paper: #f6f7f9;
  --muted: #8fa0b8;
  --line: #d5dbe6;
  --white: #ffffff;
  /* Campos de la app operación (mobile-first): alto y letra comunes. */
  --field-h: 3.375rem;
  --field-font: 1.0625rem;
  --dock-field-h: 3.5rem;
  --dock-field-font: 1.125rem;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: Poppins, Arial, "Liberation Sans", sans-serif;
  color: var(--navy);
  background: var(--paper);
  line-height: 1.45;
  padding-bottom: env(safe-area-inset-bottom);
}

body.flash-ok {
  background: #e7f6d4;
}

body.flash-warn {
  background: #fff6d8;
}

body.flash-err {
  background: #fde6ea;
}

.brand-bar {
  height: 4px;
  background: var(--lime);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.brand img {
  height: 1.85rem;
  width: auto;
  max-width: 11rem;
  display: block;
  object-fit: contain;
  object-position: left center;
  aspect-ratio: 816 / 250;
}

.header-link,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.45rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--navy);
  background: var(--lime);
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.btn-ghost,
.header-link {
  background: var(--white);
}

main {
  width: min(32rem, calc(100% - 1.4rem));
  margin: 0.9rem auto 2rem;
}

h1 {
  margin: 0 0 0.35rem;
  font-size: 1.45rem;
}

h2 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.lead,
.muted {
  color: var(--muted);
}

.pack-origin {
  margin: 0.15rem 0 0;
  color: var(--muted);
}

.pack-origin + .pack-origin {
  margin-bottom: 0.7rem;
}

.steps {
  margin: 0.7rem 0 1rem;
  padding: 0.85rem 0.9rem 0.85rem 1.5rem;
  background: var(--white);
  border-radius: 12px;
  border-left: 4px solid var(--lime);
}

.steps li {
  margin: 0.35rem 0;
}

.recibo-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.25rem;
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
}

.recibo-stepper li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
  padding: 0.4rem 0.2rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 0.62rem;
  font-weight: 600;
  text-align: center;
}

.recibo-stepper .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--line);
  font-size: 0.68rem;
}

.recibo-stepper .is-current {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.recibo-stepper .is-current .n,
.recibo-stepper .is-done .n {
  background: var(--lime);
  color: var(--navy);
}

.recibo-stepper .is-done {
  border-color: var(--lime);
}

.recibo-stepper .is-todo {
  opacity: 0.7;
}

.recibo-wizard-kicker {
  margin: 0 0 0.25rem;
  color: var(--lime);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.recibo-wizard-copy {
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.recibo-scan-kicker {
  margin: 0 0 0.35rem;
  color: var(--lime);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-menu {
  display: grid;
  gap: 0.35rem;
  padding-bottom: 5.5rem;
}

.tiles {
  display: grid;
  gap: 0.7rem;
}

.tile {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.9rem 1rem;
  background: var(--navy);
  color: #fff;
  border-radius: 14px;
  text-decoration: none;
  min-height: 4.75rem;
}

.tile-ico {
  width: 1.7rem;
  height: 1.7rem;
  color: var(--lime);
}

.tile-ico svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tile-ico circle {
  fill: currentColor;
  stroke: none;
}

.tile h2 {
  margin: 0 0 0.25rem;
  color: var(--lime);
}

.tile p {
  margin: 0;
  color: #d5dbe6;
  font-size: 0.9rem;
}

.tile.is-stub {
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--line);
}

.tile.is-stub h2 {
  color: var(--navy);
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem;
  margin: 0 0 0.75rem;
}

.list-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

button.list-card {
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  appearance: none;
}

.section-title {
  margin: 1rem 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #8fa0b8);
}

.list-card strong {
  display: block;
  font-size: 1.05rem;
}

.list-card .card-fecha {
  display: block;
}

.ship-entry-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.55rem 0 0.75rem;
}

.ship-entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.85rem;
  min-height: 2.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--navy);
  text-decoration: none;
  background: #fff;
  font-weight: 700;
}

.ship-entry.is-on {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.ship-pick-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.65rem;
  align-items: start;
}

.ship-pick-card input {
  grid-row: 1 / span 2;
  margin-top: 0.35rem;
  width: 1.15rem;
  height: 1.15rem;
}

.chip {
  display: inline-flex;
  margin-top: 0.35rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #fff6d8;
  color: var(--warn);
}

.chip-ok {
  background: #e7f6d4;
  color: var(--ok);
}

.chip-temp {
  background: color-mix(in srgb, var(--lime) 28%, var(--white));
  color: var(--navy);
}

.scan-dock {
  position: sticky;
  top: 3.2rem;
  z-index: 8;
  background: var(--navy);
  color: #fff;
  padding: 0.85rem 0.9rem 1rem;
  border-radius: 14px;
  margin-bottom: 0.85rem;
}

.scan-dock .scan-field,
.scan-dock label {
  display: grid;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 1rem;
}

.scan-dock label + label,
.scan-dock .scan-field + .scan-field {
  margin-top: 0.9rem;
}

.scan-dock .scan-label,
.scan-dock .lead {
  color: #fff;
}

.scan-dock .lead {
  color: #d5dbe6;
  font-size: 0.88rem;
}

.scan-dock input,
.scan-dock .scan-input,
.scan-dock #ship-scan {
  min-height: 3.6rem;
  font-size: 1.45rem;
  font-weight: 700;
  border: 2px solid var(--lime);
  border-radius: 10px;
  padding: 0.45rem 0.7rem;
  color: var(--navy);
  width: 100%;
}

@media (max-width: 720px) {
  h1:has(+ .pack-scan-dock) {
    font-size: 1.15rem;
    margin-bottom: 0.45rem;
  }

  .scan-dock.ship-scan-dock {
    top: 3.05rem;
    z-index: 16;
    width: calc(100% + 1.4rem);
    max-width: none;
    margin-left: -0.7rem;
    margin-right: -0.7rem;
    border-radius: 0;
    padding: 0.55rem 0.75rem 0.7rem;
  }

  .scan-dock.pack-scan-dock {
    top: 3.05rem;
    z-index: 16;
    width: calc(100% + 1.4rem);
    max-width: none;
    margin-left: -0.7rem;
    margin-right: -0.7rem;
    border-radius: 0;
    padding: 0.55rem 0.75rem 0.7rem;
  }

  .scan-dock.ship-scan-dock > .lead,
  .scan-dock.ship-scan-dock .recibo-scan-hint {
    display: none;
  }

  .scan-dock.pack-scan-dock .pack-scan-copy {
    display: none;
  }

  .scan-dock.ship-scan-dock .recibo-scan-kicker,
  .scan-dock.pack-scan-dock .recibo-wizard-kicker {
    margin-bottom: 0.35rem;
  }

  .scan-dock #ship-scan,
  .scan-dock #pack-scan,
  .scan-dock .scan-input {
    min-height: 3.9rem;
    font-size: 1.55rem;
  }

  .scan-dock.ship-scan-dock .scan-label,
  .scan-dock.pack-scan-dock .scan-label {
    font-size: 0.78rem;
  }

  .scan-dock.ship-scan-dock .scan-actions {
    display: block;
    margin-top: 0.55rem;
  }

  .scan-dock.pack-scan-dock .scan-actions {
    display: block;
    margin-top: 0.55rem;
  }

  .scan-dock.ship-scan-dock .scan-actions .btn {
    width: 100%;
    min-height: 3.1rem;
    justify-content: center;
    touch-action: manipulation;
  }

  .scan-dock.pack-scan-dock .scan-actions .btn {
    width: 100%;
    min-height: 3.1rem;
    justify-content: center;
    touch-action: manipulation;
  }
}

.scan-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.feedback {
  margin: 0.65rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  font-weight: 700;
}

.feedback.ok {
  background: #e7f6d4;
  color: var(--ok);
}

.feedback.warn {
  background: #fff6d8;
  color: var(--warn);
}

.feedback.err {
  background: #fde6ea;
  color: var(--err);
}

.current-sku {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.35rem 0 0;
}

.pick-stop-loc {
  margin: 0.15rem 0;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.pick-stop-sku {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}

.pick-stop-progress {
  margin: 0.15rem 0 0.2rem;
  font-size: 1.05rem;
}

.pick-stop-count {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-right: 0.35rem;
}

.progress {
  height: 10px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
  margin: 0.4rem 0 0.3rem;
}

.progress > span {
  display: block;
  height: 100%;
  background: var(--lime);
}

.line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}

.line:last-child {
  border-bottom: 0;
}

.faltante {
  color: var(--warn);
  font-weight: 700;
}

.login-form {
  display: grid;
  gap: 0.75rem;
}

.login-form input {
  width: 100%;
  min-height: var(--field-h);
  font: inherit;
  font-size: var(--field-font);
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.banner {
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: #fde6ea;
  color: var(--err);
}

.camera-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(11, 27, 75, 0.94);
  display: grid;
  place-items: center;
  gap: 0.75rem;
  padding: 1rem;
  color: #fff;
}

.camera-overlay video {
  width: min(100%, 22rem);
  border-radius: 12px;
  background: #000;
}

.desk-link {
  display: block;
  margin-top: 1rem;
  color: var(--navy-support);
}

.master-hu-label {
  background: var(--white);
  border: 2px solid var(--navy);
  margin: 0.75rem 0;
  overflow: hidden;
}

.master-hu-label .hu-kicker {
  margin: 0.55rem 0.7rem 0;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy);
}

.master-hu-label h3,
.master-hu-label h4 {
  margin: 0.15rem 0.7rem 0.35rem;
}

.master-hu-label img {
  display: block;
  width: calc(100% - 1.4rem);
  margin: 0 0.7rem 0.35rem;
  background: #fff;
  height: auto;
}

.master-hu-label p {
  margin: 0 0.7rem 0.35rem;
}

.master-hu-label .hu-line {
  margin: 0 0.7rem 0.55rem;
}

.master-hu-label .btn {
  margin: 0 0.35rem 0.7rem 0.7rem;
}

/* Armar ID Máster por línea de SKU (master-builder.js). */
.mb-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0 0 1.25rem;
}

.mb-wrap > *,
.mb-types,
.mb-add,
.mb-add-row {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.mb-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  color: var(--navy);
  font-size: 1.05rem;
}

.mb-total {
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
}

.mb-total.is-open {
  background: var(--lime);
  color: var(--navy);
}

.mb-total.is-done {
  background: #e3f0de;
  color: var(--ok);
}

.mb-pending,
.master-builder,
.mb-suggest {
  padding: 1rem;
  border: 2px solid var(--navy);
  border-left: 6px solid var(--lime);
  border-radius: 12px;
  background: var(--white);
}

.mb-pending-list,
.mb-rows {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mb-pending-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.mb-pending-row.is-done {
  opacity: 0.7;
}

.mb-sku {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  min-width: 0;
  color: var(--navy);
}

.mb-sku span {
  color: #5a6b84;
  font-size: 0.85rem;
}

.mb-sku .mb-n {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.mb-nums {
  display: flex;
  gap: 0.9rem;
  margin: 0;
}

.mb-nums div {
  text-align: right;
}

.mb-nums dt {
  color: #5a6b84;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mb-nums dd {
  margin: 0;
  font-weight: 700;
  color: var(--navy);
}

.mb-pending-row.is-open .mb-left dd {
  padding: 0 0.4rem;
  border-radius: 6px;
  background: var(--lime);
}

.mb-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border-left-color: var(--navy);
}

.mb-suggest p {
  margin: 0;
}

.mb-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  padding: 0;
  border: 0;
}

.mb-types legend {
  margin-bottom: 0.35rem;
  font-weight: 600;
  color: var(--navy);
}

.mb-type input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mb-type span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.45rem 1.1rem;
  border: 2px solid var(--navy);
  border-radius: 999px;
  color: var(--navy);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.mb-type input:checked + span {
  background: var(--navy);
  color: #fff;
  box-shadow: inset 0 -4px 0 var(--lime);
}

.mb-type input:focus-visible + span {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
}

.mb-add-row {
  display: flex;
  gap: 0.5rem;
}

.mb-add-row input {
  flex: 1;
  min-width: 0;
  min-height: 3rem;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--navy);
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
}

.mb-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem auto;
  align-items: end;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--lime);
  border-radius: 10px;
}

.mb-qty {
  display: grid;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: #5a6b84;
}

.mb-qty input {
  width: 100%;
  min-width: 0;
  min-height: 2.9rem;
  box-sizing: border-box;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  text-align: right;
}

.mb-empty {
  margin: 0;
  color: #5a6b84;
}

.mb-summary {
  margin: 0.75rem 0 0;
  font-weight: 700;
  color: var(--navy);
}

.mb-warn {
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: #fbe9ec;
  color: var(--err, #8b1e2d);
  font-weight: 600;
}

.mb-actions {
  margin-top: 0.9rem;
}

.mb-actions .btn,
.mb-suggest .btn,
.mb-add-row .btn,
.mb-remove {
  min-height: 3.15rem;
  touch-action: manipulation;
}

.mb-submit {
  min-width: 16rem;
  font-size: 1.05rem;
}

.pending-master-contents {
  margin: 0.35rem 0 0;
  color: #5a6b84;
  font-size: 0.9rem;
}

.hu-summary {
  margin-left: 0.4rem;
  color: #5a6b84;
  font-weight: 500;
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .mb-pending-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .mb-nums {
    justify-content: space-between;
  }

  .mb-nums div {
    text-align: left;
  }

  .mb-row {
    grid-template-columns: minmax(0, 1fr) 7rem;
  }

  .mb-row .mb-sku {
    grid-column: 1 / -1;
  }

  .mb-suggest .btn,
  .mb-actions .btn,
  .mb-submit {
    width: 100%;
    min-width: 0;
    min-height: 3.35rem;
  }

  /* El botón flotante de Don Pepe no tapa "Crear ID Máster". */
  .mb-actions {
    margin-bottom: 4.75rem;
  }
}

.pending-masters {
  display: grid;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
  padding: 0;
  list-style: none;
}

.pending-master {
  background: var(--white);
  border: 2px solid var(--navy);
  border-left: 6px solid var(--lime);
  border-radius: 12px;
  padding: 0.9rem 0.95rem 1rem;
}

.pending-master-folio {
  margin: 0;
  color: var(--navy);
  font-size: 1.12rem;
  font-weight: 600;
}

.pending-masters .hu-actions {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.pending-masters .btn {
  width: 100%;
  min-height: 3.35rem;
  margin: 0;
  font-size: 1.05rem;
  touch-action: manipulation;
}

.pack-guia-launch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
}

.pack-guia-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pack-guia-icon-svg {
  width: 1.1rem;
  height: 1.1rem;
}

.guia-cell {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.guia-num,
.folio {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 600;
  user-select: all;
  -webkit-user-select: all;
  cursor: text;
}

.pack-guia-icon-only {
  padding-inline: 0.4rem;
}

.pack-scan-steps {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 0.55rem;
  padding: 0;
}

.pack-scan-step {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: color-mix(in srgb, #fff 18%, transparent);
  color: #c9d4e8;
}

.pack-scan-step.is-on {
  background: var(--lime);
  color: var(--navy);
}

.pack-scan-copy {
  margin: 0 0 0.55rem;
  color: #d5dbe6;
  font-size: 0.88rem;
}

.pack-scan-dock-guia {
  box-shadow: inset 4px 0 0 var(--lime);
}

.pack-scan-dock-sku {
  box-shadow: inset 4px 0 0 #8fa0b8;
}

.pack-scan-label {
  position: relative;
}

.pack-order-found {
  margin: 0 0 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
}

.pack-order-folio {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.pack-order-meta {
  margin: 0.1rem 0;
}

.pack-guia-print {
  margin: 0 0 0.65rem;
}

.pack-guia-print-status {
  margin: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font-weight: 700;
}

.pack-guia-print-status.is-sent {
  background: var(--lime);
  color: var(--navy);
}

.pack-guia-print-status.is-warn {
  background: #fff6d8;
  color: var(--navy);
}

.pack-guia-reprint {
  width: 100%;
  min-height: 3.25rem;
  margin-top: 0.5rem;
  font-size: 1.12rem;
  font-weight: 700;
}

.pack-more-orders {
  margin: 0.45rem 0 0;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: var(--lime);
  color: var(--navy);
  font-weight: 700;
}

.pack-sku-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  z-index: 5;
  max-height: 12rem;
  overflow: auto;
  background: #fff;
  color: var(--navy);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(11, 27, 75, 0.22);
}

.pack-sku-hit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  font: inherit;
  text-align: left;
}

.pack-sku-hit span {
  color: #5c6b86;
  font-size: 0.9rem;
}

.pack-next-sku {
  margin: 0 0 0.7rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  background: var(--lime);
  color: var(--navy);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
}

.pack-sku-board {
  margin: 0.75rem 0 0.85rem;
}

.pack-sku-board-title {
  margin: 0 0 0.45rem;
  font-size: 1rem;
}

.pack-sku-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pack-sku-row {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.pack-sku-row.is-next {
  border-color: var(--navy);
  box-shadow: inset 4px 0 0 var(--lime);
}

.pack-sku-row.is-done {
  opacity: 0.72;
}

.pack-sku-row.is-short {
  background: #fff6d8;
}

.pack-sku-photo {
  width: 3.6rem;
  height: 3.6rem;
  object-fit: cover;
  border-radius: 8px;
  background: #eef2f8;
  flex: 0 0 auto;
}

.pack-sku-photo-empty {
  display: block;
  border: 1px dashed #c5cedd;
}

.pack-sku-code {
  display: block;
  font-weight: 700;
}

.pack-sku-title {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
}

.pack-sku-qty {
  display: block;
  margin-top: 0.2rem;
  font-weight: 600;
  font-size: 0.88rem;
}

.pack-close-row {
  padding-bottom: 4.75rem;
}

.scan-dock .feedback.err {
  margin-top: 0.7rem;
}

.guia-modal {
  width: min(28rem, calc(100vw - 1.25rem));
  height: min(36rem, calc(100vh - 2rem));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  color: var(--navy);
}

.guia-modal::backdrop {
  background: color-mix(in srgb, var(--navy) 55%, transparent);
}

.guia-modal-head {
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--line);
}

.guia-modal-head h2 {
  margin: 0;
  font-size: 1rem;
}

.guia-modal-head .scan-actions {
  margin-top: 0;
  flex-wrap: wrap;
}

.guia-modal iframe {
  width: 100%;
  height: calc(100% - 6.2rem);
  border: 0;
  background: var(--paper);
}

.guia-modal-error {
  margin: 1rem 0.85rem;
  color: var(--navy);
  font-size: 0.95rem;
}

.guia-embed {
  margin: 0 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}

.guia-embed iframe {
  width: 100%;
  min-height: 16rem;
  border: 0;
  background: var(--paper);
}

.guia-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem 0.4rem;
}

.guia-toolbar .scan-actions {
  margin-top: 0;
}

.guia-print-frame {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

@media (min-width: 720px) {
  .guia-embed iframe {
    min-height: 24rem;
  }
}

/* Don Pepe (botón con orbe + panel): estilos compartidos en /wms/don-pepe.css. */

@media (max-width: 799px) {
  main {
    margin-bottom: 4.5rem;
  }
}

.ship-anden-step {
  margin: 0.75rem 0 1rem;
}

.ship-anden-step .lead {
  margin-bottom: 0.35rem;
}

.ship-sign-pad {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: 11rem;
  border: 2px solid var(--navy, #0b1b4b);
  border-radius: 12px;
  background: #fff;
  touch-action: none;
}

.ship-sign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.ship-sign-preview {
  display: block;
  max-width: min(100%, 20rem);
  border: 1px solid #d5dce8;
  border-radius: 8px;
  background: #fff;
}

main {
  margin-bottom: 5.5rem;
}

.short-pick-open {
  width: 100%;
  margin-top: 0.85rem;
}

.short-pick-hint {
  margin: 0.35rem 0 0;
}

.short-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(11, 27, 75, 0.72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.75rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

.short-modal[hidden] {
  display: none;
}

.short-modal-card {
  width: min(32rem, 100%);
  max-height: min(92vh, 42rem);
  overflow: auto;
  background: #fff;
  color: #0b1b4b;
  border-radius: 16px 16px 12px 12px;
  padding: 1rem 1rem 1.25rem;
  box-shadow: 0 16px 40px rgba(11, 27, 75, 0.35);
  font-family: Poppins, sans-serif;
}

.short-modal-card h2 {
  margin: 0.2rem 0 0.45rem;
  color: #0b1b4b;
}

.short-modal-card label {
  display: block;
  font-weight: 600;
  margin-top: 0.75rem;
}

.short-modal-card input,
.short-modal-card select,
#rev-filters select,
#rev-close input {
  width: 100%;
  min-height: var(--field-h);
  margin-top: 0.3rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid #c9d0de;
  border-radius: 10px;
  font: inherit;
  font-size: var(--field-font);
  color: #0b1b4b;
  background: #fff;
}

.short-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.short-modal-actions .btn {
  width: 100%;
}

#rev-filters {
  margin-bottom: 0.85rem;
}

#rev-filters label {
  display: block;
  font-weight: 600;
  margin-top: 0.55rem;
}

@media (min-width: 800px) {
  .short-modal {
    align-items: center;
  }

  .short-modal-card {
    border-radius: 16px;
  }
}

.recibo-readonly-banner {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: #0b1b4b;
  color: #fff;
  border-left: 4px solid #c4e000;
}

.recibo-filters {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
}

.recibo-filters .field,
.recibo-filters label {
  display: grid;
  gap: 0.25rem;
}

.recibo-filters input,
.recibo-filters select {
  width: 100%;
  min-height: var(--field-h);
  font: inherit;
  font-size: var(--field-font);
}

.recibo-filters .form-actions,
.recibo-filters .scan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.recibo-consulta-meta {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
}

.recibo-consulta-meta dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.recibo-consulta-meta dd {
  margin: 0.1rem 0 0;
  font-weight: 600;
}

.recibo-consulta-table {
  display: none;
}

.recibo-consulta-cards {
  display: grid;
  gap: 0.55rem;
}

.recibo-line-card {
  border: 1px solid var(--line);
  border-left: 4px solid #c4e000;
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  background: #fff;
}

.recibo-evidence-img {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  border-radius: 8px;
}

/* Consolidado de embarque only. */
.embarque-consolidado {
  --embarque-navy: #0b1b4b;
  --embarque-lima: #c4e000;
  font-family: Poppins, Arial, "Liberation Sans", sans-serif;
  color: var(--embarque-navy);
  padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
}

.embarque-consolidado input:not([type="checkbox"]):not([type="radio"]),
.embarque-consolidado select,
.embarque-consolidado textarea {
  width: 100%;
  min-height: 48px;
  font-size: 16px;
  font-family: Poppins, Arial, "Liberation Sans", sans-serif;
  color: #0b1b4b;
  box-sizing: border-box;
}

.embarque-consolidado .scan-input,
.embarque-consolidado #ship-scan {
  min-height: 4.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  border: 3px solid #c4e000;
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
}

.embarque-consolidado label,
.embarque-consolidado .scan-label {
  display: grid;
  gap: 0.35rem;
  font-size: 16px;
  font-weight: 600;
}

.embarque-consolidado .embarque-consolidado-form,
.embarque-consolidado .embarque-carrier {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.embarque-consolidado select.embarque-carrier-list {
  min-height: 9.5rem;
  font-size: 16px;
  border: 2px solid #0b1b4b;
}

.embarque-consolidado .ship-sign-pad {
  width: 100%;
  max-width: none;
  height: 12rem;
  min-height: 180px;
  border: 2px solid #0b1b4b;
}

.embarque-consolidado .btn,
.embarque-consolidado .scan-actions .btn,
.embarque-consolidado .ship-sign-actions .btn {
  min-height: 48px;
  font-size: 16px;
}

@media (min-width: 900px) {
  .embarque-consolidado .embarque-consolidado-form {
    grid-template-columns: 1fr 1fr;
  }

  .embarque-consolidado .embarque-carrier,
  .embarque-consolidado .scan-actions,
  .embarque-consolidado .embarque-consolidado-form > h2 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 899px) {
  .embarque-consolidado .scan-actions,
  .embarque-consolidado .ship-sign-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .embarque-consolidado .btn,
  .embarque-consolidado .scan-actions .btn,
  .embarque-consolidado .ship-sign-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Reabasto Pick Face: líneas asignadas y escaneo guiado. */
.rea-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy-support);
}

.rea-page h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rea-page h1 .chip {
  margin-top: 0;
}

.rea-summary p {
  margin: 0 0 0.35rem;
}

.rea-dest {
  font-size: 1.05rem;
}

.rea-progress {
  height: 0.55rem;
  margin: 0.35rem 0;
  border-radius: 999px;
  background: #eef2f8;
  overflow: hidden;
}

.rea-progress span {
  display: block;
  height: 100%;
  background: var(--lime);
}

.rea-lines {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.rea-line {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}

.rea-line.is-current {
  border-color: var(--navy);
  box-shadow: inset 5px 0 0 var(--lime);
}

.rea-line.is-done {
  background: #f1f8e6;
  border-color: #cfe3b2;
}

.rea-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  border: 2px solid var(--navy);
  font-weight: 700;
}

.rea-line.is-current .rea-check {
  background: var(--navy);
  color: var(--lime);
}

.rea-line.is-done .rea-check {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}

.rea-line-body {
  display: grid;
  min-width: 0;
}

.rea-line-body strong {
  overflow-wrap: anywhere;
}

.rea-line-body small {
  color: #5d6b85;
}

.rea-step {
  border-top: 4px solid var(--lime);
}

.rea-step h2 {
  margin: 0;
  font-size: 1.2rem;
}

.rea-step > .muted {
  margin: 0.15rem 0 0.5rem;
}

.rea-field {
  display: grid;
  gap: 0.25rem;
  margin: 0.55rem 0 0;
  font-weight: 600;
}

.rea-field input,
.rea-close input,
.rea-filters select {
  width: 100%;
  min-height: var(--field-h);
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: var(--field-font);
  color: var(--navy);
  background: var(--white);
}

.rea-field input:disabled {
  background: #eef2f8;
  color: var(--muted);
}

.rea-field.is-ok input {
  border-color: var(--ok);
  box-shadow: 0 0 0 2px rgba(45, 106, 30, 0.15);
}

.rea-field.is-err input {
  border-color: var(--err);
  box-shadow: 0 0 0 2px rgba(139, 30, 45, 0.15);
}

.rea-status {
  min-height: 1.1rem;
  font-size: 0.9rem;
}

.rea-status.is-ok {
  color: var(--ok);
}

.rea-status.is-err {
  color: var(--err);
}

.rea-status.is-wait {
  color: var(--muted);
}

.rea-actions .btn {
  width: 100%;
  min-height: 3.2rem;
  font-size: 1.05rem;
  touch-action: manipulation;
}

.rea-close label {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.6rem;
}

.rea-more summary {
  cursor: pointer;
  font-weight: 700;
}

.rea-next {
  display: block;
  margin-top: 0.3rem;
  font-weight: 600;
}

.rea-err {
  margin: 0 0 0.75rem;
}

/* Deja espacio para que el botón flotante de Don Pepe no tape las acciones. */
.rea-fab-gap {
  height: 4.75rem;
}

.rea-page input,
.rea-page .btn {
  scroll-margin-bottom: 5.5rem;
}

.rea-list-card > span:not(.chip) {
  display: block;
}

.rea-list-card .chip {
  margin: 0.2rem 0 0.25rem;
}

.rea-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.4rem 0; }

/* Recibo · Conteo por cantidad y unidad (Pieza / Caja / Tarima). */
.scan-dock .scan-qty-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: end;
  margin-top: 0.6rem;
}
.scan-dock .scan-qty-row label,
.scan-dock .scan-qty-row label + label { margin: 0; }
.scan-dock .scan-qty-row .scan-label { color: #fff; font-size: 0.82rem; }
.scan-dock .scan-qty-input,
.scan-dock .scan-unit-select {
  box-sizing: border-box;
  width: 100%;
  height: 3.3rem;
  min-height: 3.3rem;
  margin: 0;
  padding: 0.35rem 0.6rem;
  border: 2px solid #8fa0b8;
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 700;
}
.scan-dock .scan-qty-input { text-align: center; font-variant-numeric: tabular-nums; }
.scan-dock .scan-unit-select { font-size: 1.05rem; }
.scan-dock .scan-qty-input:focus,
.scan-dock .scan-unit-select:focus { border-color: var(--lime); outline: 2px solid var(--lime); outline-offset: 1px; }
.scan-dock .scan-qty-input:disabled,
.scan-dock .scan-unit-select:disabled { background: #e7ebf2; color: #4a5a78; }
.scan-dock .scan-submit { min-height: 3.3rem; padding-inline: 1.1rem; background: var(--lime); color: var(--navy); border-color: var(--lime); }
.scan-qty-preview {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.scan-qty-preview.is-err { color: #ffb4ab; }
.scan-dock .scan-actions:has(#scan-camera[hidden]) { display: none; }
.line.line-tap { display: block; padding: 0; }
.recibo-line-prefill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.55rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.recibo-line-prefill-text { flex: 1 1 auto; min-width: 0; }
.line-tap-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; }
@media (max-width: 480px) {
  .line-tap-row { grid-template-columns: minmax(0, 1fr); }
}
.recibo-line-prefill-cta {
  flex: none;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--navy);
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 700;
}
/* El orbe de Don Pepe no tapa el botón «Contar». */
body:has(#don-pepe-fab:not([hidden])) .line.line-tap { padding-right: 3.5rem; }
@media (max-width: 380px) {
  .scan-dock .scan-qty-row { grid-template-columns: 5rem minmax(0, 1fr); }
  .scan-dock .scan-submit { grid-column: 1 / -1; width: 100%; }
}

/* 074 · selector de sub-almacén en el header de la app */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-sub-switch {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 12rem;
  margin-left: auto;
}

.app-sub-switch select {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--navy);
  border-left: 4px solid var(--lime);
  border-radius: 10px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.35rem 0.5rem;
  text-overflow: ellipsis;
}

@media (max-width: 420px) {
  body.has-sub-switch .brand span {
    display: none;
  }
}

/* 076 · Generar ID Máster por unidad de almacenaje (master-builder.js). Mobile-first. */
.mb-auto {
  padding: 1rem;
  border: 2px solid var(--navy);
  border-left: 6px solid var(--lime);
  border-radius: 12px;
  background: var(--white, #fff);
}

.mb-lead,
.mb-unit-src {
  margin: 0 0 0.75rem;
  color: var(--navy);
}

.mb-unit-src {
  margin-top: -0.35rem;
  color: #5a6b84;
  font-size: 0.85rem;
}

.mb-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.mb-plan {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.mb-plan-row {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.mb-plan-row.is-sin_conversion {
  border-color: var(--err, #8b1e2d);
  background: #fff7f8;
}

.mb-plan-row p {
  margin: 0;
}

.mb-plan-meta,
.mb-plan-hint,
.mb-plan-src {
  color: #5a6b84;
  font-size: 0.85rem;
}

.mb-unit-pill {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

.mb-plan-preview {
  color: var(--navy);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.mb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mb-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.mb-chip.is-full {
  background: var(--lime);
  color: var(--navy);
}

.mb-chip.is-partial {
  border: 2px dashed var(--navy);
  background: #fff8e1;
  color: var(--warn, #8a5a10);
}

.mb-plan-missing {
  display: grid;
  gap: 0.35rem;
  color: var(--err, #8b1e2d);
}

.mb-plan-missing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mb-plan-missing-actions .btn {
  min-height: 2.75rem;
}

.mb-plan-unit {
  display: grid;
  gap: 0.2rem;
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 600;
}

.mb-plan-unit select {
  min-height: 2.75rem;
  width: 100%;
  max-width: 100%;
  padding: 0.35rem 0.6rem;
  border: 2px solid var(--navy);
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font: inherit;
}

.mb-plan-total {
  margin: 0 0 0.5rem;
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 700;
}

.mb-plan-blocked {
  margin: 0 0 0.5rem;
  color: var(--err, #8b1e2d);
  font-weight: 600;
}

.mb-generate {
  width: 100%;
  min-height: 3.35rem;
  font-size: 1.05rem;
}

.mb-warn.is-info {
  background: #eef3fb;
  color: var(--navy);
}

.mb-manual {
  min-width: 0;
}

.mb-manual-summary {
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  border: 2px solid var(--navy);
  border-radius: 12px;
  background: var(--white, #fff);
  color: var(--navy);
  font-weight: 700;
  cursor: pointer;
  list-style-position: inside;
}

.mb-manual[open] > .mb-manual-summary {
  margin-bottom: 0.75rem;
}

.mb-print-all {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.mb-armed {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.mb-armed-row {
  display: grid;
  /* «Etiqueta» junto al folio (a la izquierda): el orbe de Don Pepe flota a la derecha y no la tapa. */
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 0.15rem 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.mb-armed-row span {
  grid-column: 1 / -1;
  color: #5a6b84;
  font-size: 0.85rem;
}

.mb-armed-row a {
  grid-row: 1;
  grid-column: 2;
  color: var(--navy);
  font-weight: 600;
}

.mb-armed-row.is-partial {
  border-style: dashed;
  border-color: var(--navy);
}

.hu-partial dd,
p.hu-partial {
  color: var(--warn, #8a5a10);
  font-weight: 700;
}

.mb-put-all {
  display: grid;
  gap: 0.35rem;
  margin: 0.5rem 0 0.75rem;
}

.mb-put-all .btn {
  width: 100%;
  min-height: 3rem;
}

.banner-ok {
  background: #eef8d0;
  color: var(--navy);
}

/* El orbe de Don Pepe (flotante, abajo a la derecha) no tapa «Generar ID Máster» ni «Ubicar todas». */
@media (max-width: 720px) {
  .mb-auto-actions,
  .mb-put-all {
    margin-bottom: 4.75rem;
  }
}

/* ── Paso 4 · Ubicar compacto (master-builder.js · putawayListHtml). Mobile-first. ─────────────────────────────── */
.pa-dock form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem 0.6rem;
  align-items: end;
}

.pa-dock form > label,
.pa-dock form > label.field + label.field {
  margin: 0;
  min-width: 0;
}

.pa-dock form input {
  min-width: 0;
  width: 100%;
  font-size: 1.05rem;
}

.pa-dock .scan-actions,
.pa-dock .pa-dock-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.15rem 0 0;
}

.pa-dock .scan-actions .btn,
.pa-dock .pa-dock-actions .btn {
  min-height: 2.75rem;
  margin: 0;
}

.pa-dock .pa-put-all {
  flex: 1 1 11rem;
  background: transparent;
  color: #fff;
  border: 1.5px solid var(--lime);
  font-size: 0.86rem;
  line-height: 1.2;
  white-space: normal;
}

.pa-dock .pa-put-all:hover,
.pa-dock .pa-put-all:focus-visible {
  background: rgba(196, 224, 0, 0.16);
  color: #fff;
}

.pa-list {
  margin: 0 0 1rem;
}

.pa-head {
  background: #fff;
  border: 1px solid var(--line, #d5dbe6);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.75rem;
}

.pa-progress-text {
  margin: 0 0 0.45rem;
  color: var(--navy);
  font-size: 0.95rem;
}

.pa-progress {
  height: 0.55rem;
  border-radius: 999px;
  background: #e6e9f2;
  overflow: hidden;
  margin: 0 0 0.65rem;
}

.pa-progress > span {
  display: block;
  height: 100%;
  background: var(--lime);
  border-radius: inherit;
}

.pa-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.pa-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pa-filter {
  min-height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  border: 1.5px solid var(--navy);
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.pa-filter span {
  opacity: 0.75;
  font-weight: 500;
}

.pa-filter.is-on {
  background: var(--navy);
  color: #fff;
}

.pa-menu {
  position: relative;
}

.pa-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.5rem;
  padding: 0 0.8rem;
  border-radius: 999px;
  border: 1.5px solid var(--line, #d5dbe6);
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.85rem;
}

.pa-menu > summary::-webkit-details-marker {
  display: none;
}

.pa-menu > summary::after {
  content: "▾";
  font-size: 0.75rem;
}

.pa-menu[open] > summary {
  border-color: var(--navy);
}

.pa-menu-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 0.3rem);
  z-index: 6;
  min-width: 12.5rem;
  display: grid;
  background: #fff;
  border: 1px solid var(--line, #d5dbe6);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(11, 27, 75, 0.16);
  padding: 0.3rem;
}

.pa-menu-pop a {
  display: block;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

.pa-menu-pop a:hover,
.pa-menu-pop a:focus-visible {
  background: rgba(196, 224, 0, 0.22);
}

.pa-group {
  border: 1px solid var(--line, #d5dbe6);
  border-left: 4px solid var(--lime);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 0.6rem;
}

.pa-group-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.15rem 0.6rem;
  padding: 0.65rem 0.8rem;
  color: var(--navy);
}

.pa-group-head::-webkit-details-marker {
  display: none;
}

.pa-group-sku span {
  color: #5a6b84;
  font-size: 0.85rem;
}

.pa-group-count {
  font-size: 0.85rem;
  font-weight: 600;
}

.pa-rows {
  list-style: none;
  margin: 0;
  padding: 0 0.5rem 0.5rem;
}

.pa-row {
  display: grid;
  /* Folio · menú de etiqueta (junto al folio, lejos del orbe) · pzas · estado a la derecha. Una línea por ID. */
  grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.25rem 0.45rem;
  padding: 0.35rem 0.45rem;
  border-top: 1px solid #eef1f6;
  scroll-margin-top: 16rem;
}

.pa-row:first-child {
  border-top: 0;
}

.pa-folio {
  grid-column: 1;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
}

.pa-qty {
  grid-column: 3;
  color: #33415c;
  font-size: 0.9rem;
}

.pa-status {
  grid-column: 4;
  justify-self: end;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}

.pa-status.is-pending {
  background: #fff4d6;
  color: #7a5200;
}

/* Ubicada: el estado lleva la ubicación; baja a su propia línea para no encimarse con las piezas. */
.pa-row.is-done .pa-status {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: start;
}

.pa-status.is-done {
  background: rgba(196, 224, 0, 0.3);
  color: var(--navy);
}

.pa-row-menu {
  grid-column: 2;
}

.pa-row-menu > summary {
  min-height: 2.25rem;
  min-width: 2.5rem;
  justify-content: center;
  padding: 0 0.4rem;
  font-size: 1.1rem;
  line-height: 1;
}

.pa-row-menu > summary::after {
  content: none;
}

.pa-mixed {
  grid-column: 1 / -1;
  color: #5a6b84;
  font-size: 0.82rem;
}

.pa-resto {
  display: inline-block;
  margin-left: 0;
  padding: 0 0.4rem;
  border: 1.5px dashed var(--navy);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #7a5200;
  background: #fff8e1;
}

.pa-row.is-done .pa-folio,
.pa-row.is-done .pa-qty {
  color: #6b7a93;
}

.pa-row.is-target {
  background: rgba(196, 224, 0, 0.22);
  outline: 3px solid var(--lime);
  outline-offset: -3px;
  border-radius: 8px;
}

.pa-row.is-just-done {
  animation: pa-just-done 2.4s ease-out 1;
}

@keyframes pa-just-done {
  from {
    background: rgba(196, 224, 0, 0.45);
  }
  to {
    background: transparent;
  }
}

.pa-list[data-filter="pending"] .pa-row.is-done,
.pa-list[data-filter="done"] .pa-row.is-pending,
.pa-list[data-filter="pending"] .pa-group[data-pending="0"],
.pa-list[data-filter="done"] .pa-group[data-done="0"] {
  display: none;
}

.pa-empty {
  display: none;
  color: #5a6b84;
}

.pa-list[data-filter="pending"][data-np="0"] [data-pa-empty="pending"],
.pa-list[data-filter="done"][data-nd="0"] [data-pa-empty="done"] {
  display: block;
}

@media (max-width: 720px) {
  /* Barra de escaneo más baja en celular: la lista queda visible debajo. */
  .pa-dock .recibo-scan-hint,
  .pa-dock > p.muted,
  .pa-dock .recibo-scan-kicker {
    display: none;
  }

  /* El orbe de Don Pepe flota abajo a la derecha: la lista termina por encima. */
  .pa-list {
    margin-bottom: 4.75rem;
  }

  /* Ubicar secuencial: el aviso de la barra no queda bajo el orbe de Don Pepe. */
  .pa-dock .ps-msg,
  .pa-dock .feedback {
    margin-right: 4.25rem;
  }
}

/* ── /wms/app/putaway · escaneo grande (mismo estilo que Conteo). Mobile-first. ─────────────────────────────────── */
.pw-sub {
  margin: 0 0 0.85rem;
  font-size: 1rem;
}

.pw-sub strong {
  color: var(--navy);
}

.scan-dock.pw-scan {
  position: static;
  padding: 1rem 1rem 1.15rem;
  /* El orbe de Don Pepe flota abajo a la derecha: deja aire bajo el botón y los mensajes. */
  margin-bottom: 1.25rem;
}

.pw-scan form {
  display: grid;
  gap: 1rem;
}

.scan-dock.pw-scan input {
  display: block;
  width: 100%;
  min-height: 3.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0.55rem 0.8rem;
  border: 2px solid var(--lime);
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
}

.scan-dock.pw-scan input::placeholder {
  font-size: 1.05rem;
  font-weight: 500;
  color: #8a96ad;
}

.scan-dock.pw-scan input:focus {
  outline: 4px solid rgba(196, 224, 0, 0.55);
  outline-offset: 1px;
  border-color: #fff;
}

.pw-submit {
  width: 100%;
  min-height: 3.6rem;
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0.15rem 0 0;
}

.pw-feedback {
  font-size: 1.15rem;
  line-height: 1.35;
  padding: 0.8rem 0.9rem;
  border-radius: 10px;
}

.pw-feedback.ok {
  border-left: 6px solid var(--ok, #2e7d32);
}

.pw-feedback.err {
  border-left: 6px solid var(--err, #b3261e);
}

/* «Volver a pendientes»: enlace chico secundario; deja aire para el orbe de Don Pepe bajo «Siguiente ›». */
.pw-back {
  display: inline-block;
  margin: 0.25rem 0 6rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #5b6782;
  text-decoration: underline;
}

/* ── Ubicar secuencial (master-builder.js · putawaySeqHtml): 1 ubicación → bloqueo «📍 · Cambiar» → 2 ID Máster ── */
.pa-dock form {
  display: block;
}

.ps {
  display: grid;
  gap: 0.75rem;
}

.ps [hidden] {
  display: none !important;
}

.ps-step {
  display: grid;
  gap: 0.5rem;
}

.ps-field {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  min-width: 0;
}

.ps-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.ps-num {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--lime);
  color: var(--navy);
  font-size: 0.95rem;
  font-weight: 800;
}

.ps .ps-input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  font-size: 1.35rem;
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--lime);
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
}

.ps .ps-input::placeholder {
  font-size: 1rem;
  font-weight: 500;
  color: #8a96ad;
}

.ps .ps-input:focus {
  outline: 4px solid rgba(196, 224, 0, 0.55);
  outline-offset: 1px;
  border-color: #fff;
}

.ps-help {
  margin: 0;
  font-size: 0.9rem;
  color: #d5dbe6;
}

/* Ubicación bloqueada: chip de solo lectura («📍 código») con «Cambiar» en su encabezado; el código usa todo el ancho. */
.ps-chip {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  margin: 0;
  padding: 0.55rem 0.6rem 0.65rem 0.85rem;
  border-radius: 12px;
  background: var(--lime);
  color: var(--navy);
}

.ps-chip-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ps-chip-pin {
  font-size: 1.25rem;
  line-height: 1;
}

.ps-chip-kicker {
  flex: 1 1 auto;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ps-chip-code {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.ps-chip-sub {
  font-size: 0.85rem;
  font-weight: 600;
}

.ps .ps-change,
.recibo-scan-dock .ps .ps-change {
  flex: 0 0 auto;
  min-height: 2.75rem;
  margin: 0;
  padding: 0 1rem;
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--navy);
  border-radius: 10px;
  font-weight: 800;
}

.ps .ps-change:hover,
.ps .ps-change:focus-visible {
  background: #1b2f6e;
  color: #fff;
}

.ps-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ps-actions .btn {
  min-height: 3rem;
  margin: 0;
}

.ps-actions .ps-submit {
  flex: 1 1 10rem;
  font-weight: 800;
}

/* Variante grande: /wms/app/putaway (mismo tamaño que #184). */
.ps--big .ps-label {
  font-size: 1.15rem;
}

.ps--big .ps-num {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 1rem;
}

.ps--big .ps-input {
  min-height: 3.75rem;
  font-size: 1.5rem;
}

.ps--big .ps-input::placeholder {
  font-size: 1.05rem;
}

.ps--big .ps-chip {
  padding: 0.65rem 0.7rem 0.8rem 0.95rem;
}

.ps--big .ps-chip-code {
  font-size: 2.1rem;
}

.ps--big .ps-change {
  min-height: 3rem;
  font-size: 1.05rem;
}

.ps--big .ps-actions .btn {
  min-height: 3.6rem;
  font-size: 1.15rem;
}

.ps--big .ps-actions .ps-submit {
  flex-basis: 100%;
  font-size: 1.2rem;
}

/* Mensaje corto del flujo en la barra del escritorio. */
.ps-msg {
  margin: 0.6rem 0 0;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  font-weight: 600;
  background: #fff;
  color: var(--navy);
  border-left: 6px solid var(--navy);
}

.ps-msg.ok {
  border-left-color: #2e7d32;
}

.ps-msg.warn {
  border-left-color: #c77700;
  background: #fff6e0;
}

.ps-msg.err {
  border-left-color: #b3261e;
  background: #fdecea;
}

/* ── «Siguiente ›» tras ubicar (master-builder.js · putawayNextHtml): regresa al paso 1; no sugiere ningún ID ── */
.pn {
  display: grid;
  gap: 0.6rem;
  margin: 0.75rem 0 0;
  padding: 0.85rem;
  border-radius: 12px;
  border: 1.5px solid rgba(196, 224, 0, 0.45);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: inherit;
}

.pn[hidden],
.pa-next[hidden],
.pw-next[hidden] {
  display: none !important;
}

.pn-left {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
}

.pn-left strong {
  color: var(--lime);
  font-size: 1.35rem;
  font-weight: 800;
}

.pn .pn-next,
.recibo-scan-dock .pn .pn-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.6rem;
  margin: 0;
  border: 2px solid #c4e000;
  border-radius: 12px;
  background: #c4e000;
  color: #0b1b4b;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 800;
  text-decoration: none;
}

.pn .pn-next:hover,
.pn .pn-next:focus-visible {
  background: #d4ef1a;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.pn-done {
  margin: 0;
  color: #c4e000;
  font-size: 1.25rem;
  font-weight: 800;
}

.pn--dock {
  margin-top: 0.6rem;
  padding: 0.65rem;
}

.pn--dock .pn-next,
.recibo-scan-dock .pn--dock .pn-next {
  min-height: 3.1rem;
  font-size: 1.1rem;
}


/* ── Campos grandes en la app operación (Edgar: «están pequeños los campos», Packing › Empezar packing). ──
 * Base común con especificidad 0 (:where): todo select / input / textarea de /wms/app sin estilo propio queda grande
 * (≥ 54px, 17px Poppins, fondo blanco, bordes redondeados). Las reglas propias de cada pantalla siguen mandando. */
:where(#app) :where(select, textarea, input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"], [type="color"])) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: var(--field-h);
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: var(--white);
  color: var(--navy);
  font-family: inherit;
  font-size: var(--field-font);
  font-weight: 500;
  line-height: 1.3;
}

:where(#app) :where(textarea) {
  min-height: 6rem;
}

:where(#app) :where(select, textarea, input):focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 1px;
}

/* Flecha visible (también donde la pantalla fija su propio background). Listas con size / multiple quedan nativas. */
#app select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.9rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1b4b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.25rem 1.25rem;
  text-overflow: ellipsis;
}

#app select:disabled {
  background-color: #e7ebf2;
  color: #4a5a78;
}

/* Selects dentro del dock Navy (Empezar packing, Revisión de inventario…): más altos, borde Lima. */
.scan-dock select {
  min-height: var(--dock-field-h);
  border: 2px solid var(--lime);
  border-radius: 12px;
  font-size: var(--dock-field-font);
  font-weight: 600;
}

/* Packing › Empezar packing: campos separados y botón ancho completo. */
#pack-start-form {
  position: static;
  padding: 1rem 1rem 1.15rem;
}

#pack-start-form > label + label {
  margin-top: 1rem;
}

#pack-start-form .scan-actions {
  display: block;
  margin-top: 1.15rem;
}

#pack-start-form .scan-actions .btn {
  width: 100%;
  min-height: 3.5rem;
  justify-content: center;
  font-size: 1.125rem;
  touch-action: manipulation;
}

#pack-start-form .muted,
#pack-start-form .pack-order-hint {
  font-size: 0.95rem;
  color: #d5dbe6;
}

/* `.scan-dock label { display: grid }` ganaba a [hidden]: en Empezar packing se veían los 4 selects a la vez. */
.scan-dock [hidden] {
  display: none !important;
}