/* Logística: calculadora de cubagem e conferência de expedição — complementa studio.css/office.css/calc.css */
.lg-page { --c: var(--ship); --c-soft: var(--ship-soft); }

/* ---------- Cubagem: caixas ---------- */
.lg-boxes { display: flex; flex-direction: column; gap: 12px; }
.lg-boxes .cc-table-head { margin-bottom: 0; }
.lg-count { font-size: 13px; }
.lg-box-list { display: flex; flex-direction: column; gap: 10px; }
.lg-box { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.lg-box-top { display: flex; align-items: center; gap: 6px; }
.lg-box-n { width: 26px; height: 26px; border-radius: 9px; background: var(--ship-soft); color: var(--ship); font: 700 13.5px/26px var(--font); text-align: center; flex: none; }
.lg-page .lg-box-desc { height: 36px; font-size: 14px; flex: 1; min-width: 0; background: var(--surface); }
.lg-box .icon-btn.danger:hover:not(:disabled) { background: var(--pdf-soft); color: var(--pdf); }
.lg-dims { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.lg-dims .field { grid-column: span 2; }
.lg-dims .lg-peso, .lg-dims .lg-qtd { grid-column: span 3; }
.lg-page .lg-dims .label { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.lg-page .lg-dims .input { height: 40px; font-size: 15px; background: var(--surface); }
.lg-page .lg-dims .cc-suffix .input { padding-right: 34px; }
.lg-page .lg-dims .cc-suffix > span { right: 10px; font-size: 12.5px; }
.lg-box-res { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; font-variant-numeric: tabular-nums; }
.lg-cub { color: var(--ship); }
.lg-warn-t { color: var(--biz); font-weight: 600; }
.lg-add { align-self: flex-start; }
.cc-table tr.cur td { font-weight: 600; }

/* ---------- Conferência de expedição ---------- */
.cf-page .sh-step { width: 26px; height: 26px; border-radius: 9px; background: var(--ship-soft); color: var(--ship); font: 700 14px/26px var(--font); text-align: center; flex: none; letter-spacing: 0; }
.cf-scanrow .cf-code::placeholder { font: 500 16px var(--font); letter-spacing: 0; }
.cf-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: start; }
.cf-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cf-page .of-card { display: flex; flex-direction: column; gap: 14px; }
.cf-page .of-card > .of-h { margin-bottom: 0; display: flex; align-items: center; gap: 10px; }
.cf-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 26px 16px; border: 1.5px dashed var(--line-2); border-radius: 16px; background: var(--bg); text-align: center; transition: border-color .15s, background .15s; }
.cf-drop.over { border-color: var(--ship); background: var(--ship-soft); }
.cf-drop p { margin: 0; color: var(--muted); font-size: 13.5px; }
.cf-drop b { font-size: 15.5px; color: var(--ink); }
.cf-drop .btn { margin-top: 4px; }
.cf-paste { font: 400 13px/1.45 ui-monospace, Menlo, monospace !important; min-height: 96px; white-space: pre; overflow-x: auto; }
.cf-loaded { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: var(--ship-soft); }
.cf-loaded b { font-size: 15px; }
.cf-loaded span { color: var(--ink-2); font-size: 13.5px; }
.cf-msgs { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }

/* Leitura */
.cf-scan { position: sticky; top: 72px; z-index: 5; }
.cf-scanrow { display: flex; gap: 8px; align-items: stretch; }
.cf-scanrow .cf-code { flex: 1; min-width: 0; height: 54px !important; font: 600 20px/1 ui-monospace, Menlo, monospace !important; letter-spacing: .02em; border-width: 2px; }
.cf-scanrow .cf-code:focus { border-color: var(--ship); box-shadow: 0 0 0 4px var(--ship-soft); }
.cf-mult { width: 84px !important; flex: none; height: 54px !important; text-align: center; font-weight: 700 !important; font-size: 17px !important; }
.cf-scanrow .btn { height: 54px; flex: none; }
.cf-opts { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.cf-opts .seg { margin: 0; }
.cf-opts .check { font-size: 13.5px; }
.cf-feedback { border-radius: 16px; padding: 16px 18px; display: flex; gap: 14px; align-items: center; min-height: 86px; background: var(--bg); border: 1px solid var(--line); transition: background .15s; }
.cf-feedback .cf-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--bg-2); color: var(--muted); }
.cf-feedback .cf-ico .ic { width: 28px; height: 28px; stroke-width: 2.6; }
.cf-feedback .cf-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-feedback .cf-txt b { font-family: var(--display); font-size: clamp(19px, 3.2vw, 26px); letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.cf-feedback .cf-txt span { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.cf-feedback.ok { background: #16a34a; border-color: #16a34a; color: #fff; }
.cf-feedback.done { background: #15803d; border-color: #15803d; color: #fff; }
.cf-feedback.err { background: #dc2626; border-color: #dc2626; color: #fff; }
.cf-feedback.warn { background: #d97706; border-color: #d97706; color: #fff; }
.cf-feedback.ok .cf-txt span, .cf-feedback.err .cf-txt span, .cf-feedback.warn .cf-txt span, .cf-feedback.done .cf-txt span { color: rgba(255, 255, 255, .92); }
.cf-feedback.ok .cf-ico, .cf-feedback.err .cf-ico, .cf-feedback.warn .cf-ico, .cf-feedback.done .cf-ico { background: rgba(255, 255, 255, .2); color: #fff; }
.cf-feedback.flash { animation: cf-pop .25s ease-out; }
@keyframes cf-pop { from { transform: scale(.985); } to { transform: none; } }

/* Câmera */
.cf-cam { position: relative; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; max-height: 340px; }
.cf-cam[hidden] { display: none; }
.cf-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-cam::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: rgba(255, 64, 64, .85); box-shadow: 0 0 8px rgba(255, 64, 64, .9); }
.cf-cam .cf-cam-x { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(0, 0, 0, .55); color: #fff; border: 0; }
.cf-cam-hint { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; color: #fff; font-size: 12.5px; text-shadow: 0 1px 3px #000; z-index: 2; }

/* Pedido atual */
.cf-order-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cf-order-h h2 { margin: 0; font-family: var(--display); font-size: 21px; letter-spacing: -.02em; }
.cf-order-h p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.cf-bar { height: 10px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.cf-bar i { display: block; height: 100%; background: var(--ship); border-radius: 99px; transition: width .2s; }
.cf-bar.full i { background: #16a34a; }
.cf-bar.over i { background: #d97706; }
.cf-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cf-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.cf-item .cf-st { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; color: transparent; }
.cf-item .cf-st .ic { width: 16px; height: 16px; stroke-width: 3; }
.cf-item.partial .cf-st { border-color: var(--ship); color: var(--ship); }
.cf-item.full { background: color-mix(in srgb, #16a34a 9%, var(--surface)); border-color: color-mix(in srgb, #16a34a 35%, var(--line)); }
.cf-item.full .cf-st { background: #16a34a; border-color: #16a34a; color: #fff; }
.cf-item.over { background: color-mix(in srgb, #d97706 10%, var(--surface)); border-color: #d97706; }
.cf-item.over .cf-st { background: #d97706; border-color: #d97706; color: #fff; }
.cf-item.extra { background: color-mix(in srgb, #dc2626 8%, var(--surface)); border-color: #dc2626; }
.cf-item.extra .cf-st { background: #dc2626; border-color: #dc2626; color: #fff; }
.cf-item.hit { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ship) 35%, transparent); }
.cf-desc { min-width: 0; }
.cf-desc b { display: block; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.cf-desc small { display: block; color: var(--muted); font: 500 12px/1.4 ui-monospace, Menlo, monospace; overflow-wrap: anywhere; margin-top: 2px; }
.cf-qty { display: flex; align-items: center; gap: 4px; }
.cf-qty strong { font-size: 18px; font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; white-space: nowrap; }
.cf-qty strong em { font-style: normal; color: var(--muted); font-weight: 500; font-size: 14px; }
.cf-qty .icon-btn { width: 32px; height: 32px; }
.cf-empty { margin: 0; text-align: center; color: var(--muted); padding: 18px 8px; font-size: 14px; }

/* Lista de pedidos */
.cf-orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; overscroll-behavior: contain; }
.cf-orders button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.cf-orders button:hover { background: var(--bg-2); }
.cf-orders button[aria-current="true"] { border-color: var(--ship); box-shadow: 0 0 0 1px var(--ship) inset; }
.cf-orders b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-orders small { grid-column: 1; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-orders .cf-pill { grid-row: 1 / span 2; grid-column: 2; }
.cf-pill { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--bg-2); color: var(--ink-2); white-space: nowrap; }
.cf-pill.done { background: #16a34a; color: #fff; }
.cf-pill.prog { background: var(--ship-soft); color: var(--ship); }
.cf-pill.bad { background: #dc2626; color: #fff; }
.cf-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cf-sum div { padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); min-width: 0; }
.cf-sum span { display: block; font-size: 12px; color: var(--muted); }
.cf-sum b { font-size: 18px; font-variant-numeric: tabular-nums; }

/* Histórico */
.cf-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; font-size: 13px; overscroll-behavior: contain; }
.cf-log li { display: grid; grid-template-columns: 54px 12px minmax(0, 1fr); gap: 6px; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.cf-log time { color: var(--muted); font-variant-numeric: tabular-nums; }
.cf-log i { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; display: inline-block; }
.cf-log li.err i { background: #dc2626; }
.cf-log li.warn i { background: #d97706; }
.cf-log span { overflow-wrap: anywhere; color: var(--ink-2); }
.cf-log span code { font: 500 12px ui-monospace, Menlo, monospace; color: var(--ink); }

@media (max-width: 920px) {
  .cf-layout { grid-template-columns: minmax(0, 1fr); }
  .cf-scan { position: static; }
}
@media (max-width: 520px) {
  .lg-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-dims .field, .lg-dims .lg-peso, .lg-dims .lg-qtd { grid-column: span 1; }
  .lg-dims .lg-a { grid-column: span 2; }
  .cf-scanrow { flex-wrap: wrap; }
  .cf-scanrow .cf-code { flex: 1 1 100%; }
  .cf-scanrow .cf-mult { flex: 0 0 84px; }
  .cf-scanrow .btn { flex: 1 1 0; padding-left: 10px; padding-right: 10px; }
  .cf-item { grid-template-columns: 26px minmax(0, 1fr); }
  .cf-item .cf-qty { grid-column: 1 / -1; justify-content: flex-end; }
  .cf-feedback { padding: 14px; }
  .cf-sum b { font-size: 16px; }
}

/* destaque do peso que vale (sem a classe global .hl, que sublinha títulos) */
.cc-stat.lg-hl { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 1px var(--accent) inset; }
.cc-stat.lg-hl b { color: var(--accent); }