/* Painel da unit, parte da carga (P-090; design aprovado "M10 — carga, ordens e template":
 * M10Panel, M10Cargo, M10States, M10Mobile): a recusa do servidor em bloco coral sob os
 * botões, o quadro "Ordem" do drone e uma seção por container, depois de um filete. */
.up-ref {
  display: flex; gap: 9px; padding: 9px 10px; border-radius: 10px;
  background: rgba(255, 143, 128, 0.10); border: 1px solid rgba(255, 143, 128, 0.40);
}
.up-ref[hidden], .up-ord[hidden], .up-ord-sub[hidden], .up-legs[hidden], .up-cargo[hidden] { display: none; }
.up-ref-i {
  flex: none; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 800; color: #1A0B0B; background: #FF8F80;
}
.up-ref-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.up-ref-h { font-size: 13px; font-weight: 650; color: #FFB4A9; }
.up-ref-m { font-size: 12.5px; line-height: 16px; color: #F2D2CC; }

/* O quadro "Ordem": abismo 35 %, traço .14 (violeta .35 esperando). */
.up-ord {
  display: flex; flex-direction: column; gap: 5px; padding: 9px 10px; border-radius: 10px;
  background: rgba(7, 11, 26, 0.35); border: 1px solid rgba(150, 185, 255, 0.14);
}
.up-ord.wait { border-color: rgba(183, 156, 255, 0.35); }
/* Cabeças que não cabem nos 240 px com a mono da plataforma: a parte da direita desce,
 * alinhada à direita, em vez de vazar (o design não tem esse caso). */
.up-ord-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.up-ord-h > span:first-child, .upc-name {
  font: 600 11px ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.1em; text-transform: uppercase; color: #93A3C8; white-space: nowrap;
}
.up-legs { margin-left: auto; display: flex; gap: 4px; }
.up-legs span, .upc-tag {
  height: 18px; padding: 0 6px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  border-radius: 9px; font-size: 10.5px; font-weight: 600; color: #6F7D9E; border: 1px solid rgba(150, 185, 255, 0.18);
}
.up-legs span.on { color: #6CF2E0; border-color: rgba(108, 242, 224, 0.5); background: rgba(108, 242, 224, 0.10); }
.up-ord-s { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 18px; color: #E8EEFF; }
.up-ord.off .up-ord-s { color: #93A3C8; }
.up-ord.wait .up-ord-s { color: #D9CCFF; }
.up-ord-sub { margin: 0; font-size: 12.5px; line-height: 16px; color: #93A3C8; }
/* A marca: ponto plasma andando, quadradinho transferindo, anel violeta esperando, visto
 * concluída, ponto cinza sem ordem. */
.up-mark { flex: none; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; background: #5B6788; }
.up-mark.go, .up-mark.work { background: #6CF2E0; box-shadow: 0 0 0 3px rgba(108, 242, 224, 0.18); }
.up-mark.work { border-radius: 2px; }
.up-mark.wait { background: transparent; border: 2px solid #B79CFF; }
.up-mark.done {
  width: 10px; height: 6px; border-radius: 0; background: transparent;
  border-left: 2px solid #6CF2E0; border-bottom: 2px solid #6CF2E0; transform: rotate(-45deg) translate(1px, -1px);
}

/* Os containers: filete .12 e as seções (M10Cargo). */
.up-cargo { padding-top: 10px; border-top: 1px solid rgba(150, 185, 255, 0.12); }
.upc { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.upc-sec { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.upc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.upc-name { color: #C4CFEA; }
.upc-tag { flex: none; color: #6CF2E0; border-color: rgba(108, 242, 224, 0.35); }
.upc-cap {
  margin-left: auto; flex: none; white-space: nowrap; color: #93A3C8;
  font: 11px ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}
.upc-cap.full { color: #E8EEFF; }
.upc-bar { display: flex; gap: 3px; height: 4px; border-radius: 2px; overflow: hidden; }
.upc-bar span { flex: 1; border-radius: 2px; background: rgba(150, 185, 255, 0.16); }
.upc-bar span.on { background: #9DBBFF; }
.upc-bar span.full { background: #E8EEFF; }
.upc-bar.mix { gap: 0; background: rgba(150, 185, 255, 0.16); }
.upc-bar.mix span { flex: none; }
.upc-empty { margin: 0; font-size: 13px; line-height: 18px; color: #93A3C8; }
.upc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.upc-row {
  height: 28px; box-sizing: border-box; padding: 0 6px; display: flex; align-items: center; gap: 8px; border-radius: 7px;
}
.upc-row.hot { background: rgba(108, 242, 224, 0.12); box-shadow: inset 2px 0 0 #6CF2E0; }
.upc-ic { flex: none; color: #C4CFEA; }
.upc-ic.m { color: #9DBBFF; }
.upc-ic.c { color: #E8EEFF; }
.upc-ic.k { color: #F2C46C; }
.upc-n {
  flex: 1; min-width: 0; font-size: 13.5px; line-height: 18px; color: #E8EEFF;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upc-q, .upc-d, .upc-c { flex: none; font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; }
.upc-q { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #93A3C8; }
.upc-sw { width: 9px; height: 9px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px #45BCCF; background: #13242A; }
.upc-sw.t1 { background: #12313A; }
.upc-sw.t2 { background: #134049; }
.upc-sw.t3 { background: #145160; }
.upc-sw.t4 { background: #166474; }
.upc-d { font-size: 11px; font-weight: 600; color: #6CF2E0; }
.upc-c { min-width: 34px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; color: #E8EEFF; }
.upc-row.hot .upc-c { color: #6CF2E0; }

/* Celular: linhas de 32 px; a caixa que rola (220 px, M12Mobile) é a de unit-panel-prod.css. */
@media (max-width: 860px) {
  .upc-row { height: 32px; }
  .upc-n { font-size: 14.5px; }
  .upc-c { font-size: 13px; }
}