/* ═══════════════════════════════════════════════════════════════
   DEVOLUÇÃO DE CAIXAS DA O.C. (codebar, D14) — devolucao-caixas.js
   Duas etapas: Triagem (lê as caixas na mão, a tela diz para onde vai cada uma) e Rota de guarda (uma parada por
   endereço, na ordem da planta; em cada uma, etiqueta do endereço e de novo cada caixa).
   Mesma linguagem das rotinas do coletor: cartão branco (.wms-card), campo de leitura com câmera (.wms-inp-row),
   botões em pílula. Cor de estado: teal em andamento, verde pronto/conferido, âmbar no que pede ação ou atenção.
   ═══════════════════════════════════════════════════════════════ */

/* Wrappers dos cards (filhos diretos da .screen), como #or-card-lista */
.dv-wrap { width: 100%; display: flex; justify-content: center; }

/* ── Menu WMS: contador de devoluções pendentes ─────────────────── */
.menu-btn.dv-menu-btn { position: relative; }
.dv-menu-badge {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #d97706;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 0 0 3px rgba(217,119,6,.18);
  animation: dv-badge-entra .4s cubic-bezier(.2,.9,.3,1.3);
}
.dv-menu-badge[hidden] { display: none; }
@keyframes dv-badge-entra { from { transform: translateY(-50%) scale(.4); opacity: 0; } to { transform: translateY(-50%) scale(1); opacity: 1; } }

/* ── Card: corpo que rola e rodapé de ações ─────────────────────── */
/* O corpo rola por dentro quando não cabe; os botões ficam no pé do card, sempre à vista (regra "rodapé de ações
   sempre visível"). A margem negativa leva a área de rolagem até a borda do card (padding lateral do .wms-card). */
.dv-corpo { margin: 0 -20px; padding: 0 20px 2px; }
.dv-card .wms-step { margin-bottom: 12px; }
.dv-card .dv-acoes { margin-top: 0; padding-top: 14px; border-top: 1px solid #eef1f1; }
.dv-acoes-sec { display: flex; gap: 10px; }
.dv-acoes-sec > .wms-btn-cancelar { flex: 1; min-width: 0; padding: 11px 6px; font-size: 13px; }
.dv-acoes-sec > .wms-btn-cancelar:disabled { opacity: .45; }

@media (min-height: 561px) {
  .screen.lista-fill > .lista-fill-card .dv-corpo {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    /* O conteúdo que rola some suave nas bordas, sem corte seco */
    margin-top: -8px;
    padding-top: 8px;
    padding-bottom: 10px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 10px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 10px), transparent 100%);
  }
  .screen.lista-fill > .lista-fill-card .dv-acoes { flex: none; }
}

/* Campo de leitura: brilho correndo enquanto o servidor responde */
.dv-campo { margin-bottom: 12px; }
.wms-inp.dv-lendo {
  background-image: linear-gradient(90deg, transparent 0%, rgba(22,71,224,.12) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: dv-lendo 1s linear infinite;
}
@keyframes dv-lendo { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Recusa: o bloco treme */
.treme { animation: dv-treme .35s; }
@keyframes dv-treme { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* Código do produto em pílula */
.dv-cod {
  display: inline-block;
  margin-right: 7px;
  padding: 1px 7px;
  border-radius: 6px;
  background: #e3efef;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
  vertical-align: 1px;
}

/* Barra de progresso */
.dv-barra { height: 6px; margin-top: 6px; border-radius: 3px; background: #e9ecef; overflow: hidden; }
.dv-barra > span { display: block; height: 100%; border-radius: 3px; background: var(--teal); transition: width .5s cubic-bezier(.4,0,.2,1); }
.dv-barra.ok > span     { background: #1f9254; }
.dv-barra.passou > span { background: #d97706; }

/* ══ ETAPA 1: TRIAGEM ══════════════════════════════════════════════ */

/* Para onde vai o que acabou de ser lido */
.dv-destino {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0E1B33 0%, #1647E0 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(21,95,95,.22);
}
.dv-destino[hidden] { display: none; }
.dv-destino.entra { animation: dv-destino-entra .45s cubic-bezier(.2,.8,.2,1); }
@keyframes dv-destino-entra {
  0%   { transform: scale(.96); box-shadow: 0 0 0 0 rgba(22,71,224,.55); }
  60%  { transform: scale(1);   box-shadow: 0 0 0 10px rgba(22,71,224,0); }
  100% { box-shadow: 0 6px 16px rgba(21,95,95,.22); }
}
.dv-destino-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; opacity: .8; }
/* Um bloco por endereço (o palete pode dividir as caixas em mais de um); o endereço usa a largura toda */
.dv-destino-bloco { margin-top: 4px; }
.dv-destino-bloco + .dv-destino-bloco { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.18); }
.dv-destino-val {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1.15;
  word-break: normal;
  overflow-wrap: anywhere;   /* quebra só depois de um ponto (<wbr> do JS) */
}
.dv-destino-prod { margin-top: 4px; font-size: 12.5px; line-height: 1.35; opacity: .95; }
.dv-destino-prod .dv-cod { background: rgba(255,255,255,.18); color: #fff; }
.dv-destino-qtd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 13px; font-weight: 800; }
.dv-destino-ordem {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  white-space: nowrap;
}

/* Indicadores numa linha só */
.dv-kpis { display: flex; gap: 8px; margin-bottom: 14px; }
.dv-kpi {
  flex: 1;
  min-width: 0;
  padding: 7px 8px;
  border-radius: 12px;
  background: #f4f7f7;
  text-align: center;
}
.dv-kpi b { display: block; font-size: 18px; line-height: 1.1; color: #1a1a1a; }
.dv-kpi span { display: block; font-size: 10.5px; font-weight: 700; color: #6c757d; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-kpi.ok { background: #eaf7ef; }
.dv-kpi.ok b { color: #17733f; }

.dv-lista-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dv-lista-topo .wms-lbl { margin: 0; }
.dv-atualizar {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: rgba(22,71,224,.09);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dv-atualizar svg { width: 18px; height: 18px; }
.dv-atualizar:active { background: rgba(22,71,224,.18); }
.dv-atualizar.girando svg { animation: dv-gira .8s linear infinite; }
@keyframes dv-gira { to { transform: rotate(360deg); } }

.dv-vazio svg { color: #9fd8b4; width: 38px; height: 38px; }
.dv-vazio b   { color: #6c757d; }

/* Um cartão por endereço de destino */
.dv-grupos { display: flex; flex-direction: column; gap: 10px; }
.dv-grupo {
  padding: 12px;
  border: 1.5px solid #e6ecec;
  border-radius: 14px;
  background: #fff;
  transition: border-color .3s;
}
.dv-grupo.pronto { border-color: #9fd8b4; }
.dv-grupo.destaque { animation: dv-grupo-destaque 1.2s ease-out; }
@keyframes dv-grupo-destaque {
  0%   { box-shadow: 0 0 0 0 rgba(22,71,224,.45); background: #eef7f7; }
  100% { box-shadow: 0 0 0 10px rgba(22,71,224,0); background: #fff; }
}
.dv-grupo-topo { display: flex; align-items: center; gap: 10px; }
.dv-ordem {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dv-grupo.pronto .dv-ordem { background: #1f9254; }
.dv-ordem.vazio { background: #eef1f1; color: #adb5bd; }
.dv-ordem svg { width: 15px; height: 15px; }
.dv-grupo-end { flex: 1; min-width: 0; }
.dv-grupo-end-val {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--teal-dark);
  word-break: normal;
  overflow-wrap: anywhere;   /* quebra só depois de um ponto (<wbr> do JS) */
  line-height: 1.2;
}
.dv-grupo-dep { display: block; font-size: 11.5px; color: #868e96; margin-top: 1px; }
.dv-pill {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.dv-pill.ok      { background: #dcf3e4; color: #17733f; }
.dv-pill.parcial { background: rgba(22,71,224,.1); color: var(--teal); }
.dv-pill.falta   { background: #fdebd0; color: #9a4a07; }
/* Com outro operador: informação, não pede ação deste (neutro) */
.dv-pill.rota,
.dv-pill.outro   { background: #eef1f3; color: #495057; }
.dv-pill.rota::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; vertical-align: 1px;
  border-radius: 50%; background: var(--teal);
}

/* Pedido de reset ou cancelamento do escritório (D22): marca petrol, informação (não pede ação além de ler as caixas) */
.dv-dev-pedido {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 6px; font-size: 11.5px; font-weight: 600; color: #495057;
}
.dv-tag-pedido {
  display: inline-block; flex: none; margin-right: 6px; padding: 2px 8px; border-radius: 999px;
  background: rgba(22,71,224,.12); color: var(--teal-dark);
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px;
}
.dv-dev-pedido .dv-tag-pedido { margin-right: 0; }
.dv-tag-pedido.canc,
.dv-dev-pedido.canc .dv-tag-pedido { background: #eef1f3; color: #495057; }
/* No quadro escuro "Leve ao endereço" da parada: versão clara */
.dv-alvo-item .dv-tag-pedido,
.dv-alvo-item .dv-tag-pedido.canc { background: rgba(255,255,255,.2); color: #fff; }

/* Endereço em rota com outro operador: o nome inteiro, numa linha própria */
.dv-grupo-aviso {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 10px; padding: 7px 10px; border-radius: 8px;
  background: #eef1f3; color: #495057; font-size: 12px; line-height: 1.35;
}
.dv-grupo-aviso svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--teal); }
.dv-grupo-aviso b { color: #1a1a1a; overflow-wrap: anywhere; }

.dv-dev { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e3e9e9; }
.dv-dev-prod { font-size: 13px; font-weight: 700; color: #1a1a1a; line-height: 1.3; }
.dv-dev-lin { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12px; color: #6c757d; }
.dv-dev-lin b { color: #1a1a1a; }
.dv-dev-oc { white-space: nowrap; font-weight: 700; color: #868e96; }
.dv-nota { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--teal-dark); }
.dv-nota.atencao { color: #9a4a07; }
.dv-nota.outro   { color: #6c757d; font-weight: 600; }
/* Devolução na triagem de outro operador: fica à vista, mas recuada */
.dv-dev.de-outro .dv-dev-prod,
.dv-dev.de-outro .dv-dev-lin { opacity: .72; }
.dv-dev.de-outro .dv-barra span { filter: grayscale(1); }

/* Caixas lidas para o endereço: recolhidas por padrão */
.dv-grupo-cx-tog {
  width: 100%;
  margin-top: 10px;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: #f1f6f6;
  color: var(--teal-dark);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dv-grupo-cx-tog svg { width: 16px; height: 16px; flex: none; }
.dv-grupo-cx-tog span { flex: 1; text-align: left; }
.dv-grupo-cx-tog svg:last-child { transition: transform .2s; }
.dv-grupo-cx-tog.aberto svg:last-child { transform: rotate(180deg); }
.dv-grupo .dv-cx-lista { margin-top: 8px; }

/* Linha de caixa (triagem) */
.dv-cx-lista { display: flex; flex-direction: column; gap: 8px; }
.dv-cx {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 11px;
  border: 1.5px solid #e6ecec;
  border-radius: 12px;
  background: #f6f8f8;
}
.dv-cx-ic {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: #e1efef;
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dv-cx-ic svg { width: 19px; height: 19px; }
.dv-cx-ic.ua { background: #e6eaf3; color: #3d5a8a; }
.dv-cx-info { flex: 1; min-width: 0; }
.dv-cx-lin { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dv-cx-tit { font-size: 13px; font-weight: 700; color: #1a1a1a; }
.dv-cx-qtd { flex: none; font-size: 14px; font-weight: 800; color: #1a1a1a; white-space: nowrap; }
.dv-cx-qtd small { margin-left: 3px; font-size: 10.5px; font-weight: 700; color: #868e96; }
.dv-cx-n {
  margin-right: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e6eaf3;
  color: #3d5a8a;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.dv-cx-cod {
  margin-top: 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.35;
  color: #6c757d;
  /* Quebra no meio do código (<wbr> do JS); só corta em outro ponto se nem a metade couber */
  word-break: normal;
  overflow-wrap: anywhere;
}
.dv-cx-det { margin-top: 2px; font-size: 11.5px; color: #868e96; }
.dv-cx-det:empty { display: none; }
.dv-cx-leitor { margin-top: 2px; font-size: 11.5px; font-weight: 700; color: #6c757d; }

/* Desfazer: negação, contorno vermelho já parado (coletor é touch) */
.dv-cx-rem {
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1.5px solid #e6a39c;
  border-radius: 50%;
  background: #fff;
  color: #c0473b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dv-cx-rem svg { width: 15px; height: 15px; }
.dv-cx-rem:hover,
.dv-cx-rem:active { background: #fdecea; border-color: #c0473b; }
.dv-cx-rem:active { transform: scale(.93); }

/* ══ ETAPA 2: PARADA DA ROTA ═══════════════════════════════════════ */

/* Parada anterior concluída */
.dv-feito {
  margin-bottom: 12px;
  padding: 9px 12px;
  border: 1.5px solid #9fd8b4;
  border-radius: 12px;
  background: #f1fbf4;
  color: #17673a;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
}
.dv-feito[hidden] { display: none; }
.dv-feito.entra { animation: dv-feito-entra .4s cubic-bezier(.2,.8,.2,1); }
@keyframes dv-feito-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Destino da parada */
.dv-alvo {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0E1B33 0%, #1647E0 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(21,95,95,.22);
}
.dv-alvo-end-lbl { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; opacity: .75; }
.dv-alvo-end-val {
  display: block;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1.15;
  word-break: normal;
  overflow-wrap: anywhere;   /* quebra só depois de um ponto (<wbr> do JS) */
}
.dv-alvo-dep { display: block; margin-top: 2px; font-size: 12px; opacity: .8; }
.dv-alvo-itens { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; gap: 6px; }
.dv-alvo-item { font-size: 12.5px; line-height: 1.35; }
.dv-alvo-item .dv-cod { background: rgba(255,255,255,.18); color: #fff; }
.dv-alvo-item-qtd { display: block; margin-top: 1px; font-weight: 800; }

/* Conferência: endereço e cada caixa */
.dv-cx-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dv-cx-topo .wms-lbl { margin: 0; }
.dv-cx-cont {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(22,71,224,.1);
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}
.dv-cx-cont:empty { display: none; }

.dv-conf { display: flex; flex-direction: column; gap: 6px; }
.dv-conf-lin {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1.5px solid #e6ecec;
  border-radius: 12px;
  background: #fafbfb;
  transition: border-color .25s, background .25s;
}
.dv-conf-lin.atual { border-color: var(--teal); background: #f2f9f9; }
.dv-conf-lin.ok    { border-color: #9fd8b4; background: #f1fbf4; }
.dv-conf-ic {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: #e1efef;
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dv-conf-ic svg { width: 18px; height: 18px; }
.dv-conf-lin.ok .dv-conf-ic { background: #dcf3e4; color: #1f9254; }
.dv-conf-txt { flex: 1; min-width: 0; font-size: 13px; color: #1a1a1a; }
.dv-conf-txt small { display: block; margin-top: 1px; font-size: 11.5px; color: #868e96; }
.dv-conf-st {
  width: 26px;
  height: 26px;
  flex: none;
  border: 2px solid #dee2e6;
  border-radius: 50%;
  background: #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
.dv-conf-st svg { width: 14px; height: 14px; }
.dv-conf-lin.ok .dv-conf-st { background: #1f9254; border-color: #1f9254; animation: dv-marca .3s cubic-bezier(.2,.9,.3,1.3); }
@keyframes dv-marca { from { transform: scale(.5); } to { transform: scale(1); } }

/* Pronto para confirmar: o botão "chama" duas vezes */
.wms-btn-confirmar.dv-pronto { animation: dv-chama 1.4s ease-out 2; }
@keyframes dv-chama {
  0%   { box-shadow: 0 0 0 0 rgba(22,71,224,.5); }
  70%  { box-shadow: 0 0 0 12px rgba(22,71,224,0); }
  100% { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dv-menu-badge, .dv-destino.entra, .dv-grupo.destaque, .dv-feito.entra, .treme, .dv-conf-lin.ok .dv-conf-st,
  .wms-btn-confirmar.dv-pronto, .wms-inp.dv-lendo, .dv-atualizar.girando svg { animation: none; }
  .dv-barra > span, .dv-grupo-cx-tog svg:last-child { transition: none; }
}