/* ============ WMS · SM PRO — o armazém em 3D no Painel ============
   A cena ocupa a tela inteira e os painéis flutuam sobre ela (cabeçalho, lado, pé), soltos pela sombra. No celular a cena
   fica em cima, menor, e os painéis descem em fila. A cena é desenhada por public/js/armazem3d/.
   As três cores abaixo repetem as das caixas na cena (tema.js): mexeu lá, mexa aqui. */
:root { --a3d-ocupado: #77777c; --a3d-separando: #ffb340; --a3d-diverge: #ff6b6b; }
:root[data-tema="claro"] { --a3d-ocupado: #cfb08a; --a3d-separando: #ff9a1f; --a3d-diverge: #e5484d; }

.conteudo.conteudo-cena { position: relative; max-width: none; height: calc(100dvh - 52px); padding: 0; overflow: hidden; }
.conteudo.conteudo-cena > * + * { margin-top: 0; }
/* No app a tela vem dentro de um elemento só (`.a3d-raiz`), que não entra no leiaute. */
.a3d-raiz { display: contents; }
.a3d-vazio { padding: 20px 24px; }
.a3d-lado .atencao-verbo { display: none; }

/* ---------- A cena ---------- */
.a3d { position: absolute; inset: 0; overflow: hidden; background: var(--chao); }
.a3d-tela { display: block; width: 100%; height: 100%; outline: none; }
.a3d-rotulos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.a3d[data-sem3d] { display: grid; place-items: center; padding: 24px; }
.a3d-aviso { max-width: 40ch; text-align: center; color: var(--apagado); }

/* Rótulo preso a um ponto do mundo: pílula com o fio que desce até o objeto. */
.a3d-rotulo, .a3d-rotulo:is(:hover, :active) {
  position: absolute; left: 0; top: 0; height: 24px; gap: 7px; margin-top: -12px; padding: 0 10px;
  font: 500 12px/1 var(--fonte); color: var(--tinta); background: var(--placa); border: 1px solid var(--fio);
  border-radius: var(--raio-pilula); box-shadow: var(--sombra-2);
  pointer-events: auto; will-change: transform; transition: border-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.a3d-rotulo:is(:hover, :focus-visible) { color: var(--forte); border-color: var(--fio-forte); }
.a3d-rotulo b { font-weight: 650; color: var(--forte); }
.a3d-rotulo span:empty { display: none; }
.a3d-rotulo::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: var(--haste, 12px); margin-top: 1px; background: var(--fio-forte); }
.a3d-rotulo[data-estado]::before { content: ""; width: 7px; height: 7px; flex: none; margin-left: -2px; border-radius: 50%; background: var(--c); }
.a3d-rotulo[hidden], .a3d-dica[hidden] { display: none; }
[data-estado="azul"] { --c: var(--azul); }
[data-estado="verde"] { --c: var(--verde); }
[data-estado="ambar"], [data-estado="separando"] { --c: var(--ambar); }
[data-estado="vermelho"], [data-estado="diverge"] { --c: var(--vermelho); }

/* Dica que acompanha o mouse sobre uma caixa. */
.a3d-dica {
  position: absolute; left: 0; top: 0; z-index: 2; display: grid; gap: 1px; min-width: 150px; padding: 8px 10px;
  font-size: 12.5px; line-height: 1.4; pointer-events: none; background: var(--face); border: 1px solid var(--fio); border-radius: 12px; box-shadow: var(--sombra-2);
}
.a3d-dica b { font: 600 13px var(--mono); }
.a3d-dica span:is([data-estado="ambar"], [data-estado="vermelho"]) { color: color-mix(in oklab, var(--c) 70%, var(--forte)); }
.a3d-dica small { font-size: 12px; color: var(--apagado); }

/* ---------- Painéis sobre a cena ---------- */
.a3d-camadas {
  position: absolute; inset: 0; z-index: 1; display: grid; gap: 12px; padding: 12px; pointer-events: none;
  grid-template: "cabeca lado" auto "meio lado" minmax(0, 1fr) "pe lado" auto / minmax(0, 1fr) 320px;
}
.a3d-camadas > * { min-width: 0; pointer-events: auto; }
/* Sobre a cena, toda placa sobe um degrau de sombra. */
.a3d-camadas :is(.bloco, .numeros) { box-shadow: var(--sombra-2), var(--brilho); }
.a3d-comandos .botao-icone { background: var(--placa); box-shadow: var(--sombra-2); border-radius: 50%; }
.a3d-camadas [hidden] { display: none !important; }

.a3d-cabeca {
  grid-area: cabeca; justify-self: start; display: grid; gap: 10px; max-width: 100%; padding: 12px 14px;
  background: var(--placa); border: 1px solid var(--fio); border-radius: var(--raio-placa); box-shadow: var(--sombra-2), var(--brilho);
}
.a3d-cabeca-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.a3d-titulo { display: grid; gap: 1px; }
.a3d-titulo small { font-size: 12px; color: var(--apagado); white-space: nowrap; }
.a3d-vistas { overflow-x: auto; scrollbar-width: none; }
.a3d-vistas > .a3d-divisor { flex: none; align-self: center; width: 1px; min-width: 0; height: 18px; margin: 0 5px; padding: 0; border-radius: 0; background: var(--fio-forte); pointer-events: none; }
.a3d-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--fio); font-size: 12px; }
.a3d-legenda li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.a3d-legenda i { width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--cor, transparent); border: 1px solid var(--borda, var(--cor)); }

.a3d-comandos { grid-area: meio; align-self: end; justify-self: end; display: flex; align-items: center; gap: 6px; }
.a3d-ajuda { margin-right: 6px; font-size: 12px; color: var(--apagado); }
.so-dedo { display: none; }

.a3d-lado { grid-area: lado; align-self: start; display: flex; flex-direction: column; gap: 12px; max-height: 100%; overflow-y: auto; }
.a3d-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a3d-lado .atencao-linha { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 10px; padding: 10px 12px 10px 10px; }
.a3d-lado .atencao-conta { font-size: 22px; }
.a3d-lado .atencao-ir { justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; }
.a3d-lado .etapas { grid-template-columns: minmax(0, 1fr); gap: 5px; }
.a3d-lado .etapas li { grid-template-columns: 54px minmax(0, 1fr); align-items: baseline; }
.a3d-lado .etapas span { font-size: 12.5px; color: var(--tinta); }

.a3d-pe { grid-area: pe; display: grid; gap: 12px; }
.a3d-pe .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- A rua de frente: uma célula por vão ---------- */
.a3d-frente { padding-bottom: 12px; }
.a3d-frente-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; }
.a3d-grade-rola { min-width: 0; overflow-x: auto; }
.a3d-grade { display: grid; grid-template-columns: 26px repeat(var(--predios, 14), minmax(0, 1fr)); gap: 2px; align-items: center; padding: 2px; }
.a3d-eixo { font: 500 10.5px/1.6 var(--fonte); text-align: center; color: var(--apagado); }
.a3d-celula, .a3d-celula:is(:hover, :active) {
  height: 18px; min-width: 0; padding: 0; border-radius: 4px; box-shadow: none; background: var(--cor, transparent); border: 1px solid var(--borda, var(--cor));
}
.a3d-celula:hover { border-color: var(--forte); }
.a3d-celula[aria-pressed="true"] { outline: 1.5px solid var(--forte); outline-offset: 1px; }
[data-estado="livre"] { --borda: var(--fio-forte); }
:is(.a3d-celula, .a3d-legenda i)[data-estado="ocupado"] { --cor: var(--a3d-ocupado); }
:is(.a3d-celula, .a3d-legenda i)[data-estado="separando"] { --cor: var(--a3d-separando); }
:is(.a3d-celula, .a3d-legenda i)[data-estado="diverge"] { --cor: var(--a3d-diverge); }

.a3d-vao { display: grid; gap: 8px; align-content: start; justify-items: start; padding-left: 18px; border-left: 1px solid var(--fio); }
.a3d-vao-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.a3d-vao-topo b { font: 600 15px var(--mono); }
.a3d-situacao { font: 580 12px/1.5 var(--fonte); color: var(--apagado); }
.a3d-situacao:is([data-estado="separando"], [data-estado="diverge"]) { color: color-mix(in oklab, var(--c) 70%, var(--forte)); }

/* ---------- Toque: sem botões de câmera (dois dedos giram e aproximam) ---------- */
@media (hover: none) and (pointer: coarse) {
  .a3d-comandos .botao-icone, .so-mouse { display: none; }
  .so-dedo { display: inline; }
}

/* Tela média (notebook estreito, janela pela metade): os números do pé vão a duas colunas para não se atropelar. */
@media (min-width: 720px) and (max-width: 1099px) {
  .a3d-pe .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a3d-pe .numero-cel:nth-child(odd) { border-left: 0; }
  .a3d-pe .numero-cel:nth-child(n + 3) { border-top: 1px solid var(--fio); }
}

/* ---------- Celular: a cena em cima, os painéis em fila ---------- */
@media (max-width: 719px) {
  .conteudo.conteudo-cena { display: flex; flex-direction: column; gap: 12px; height: auto; padding: 14px 14px calc(22px + var(--barra)); overflow: visible; }
  .a3d-camadas { display: contents; }
  .a3d-cabeca { order: 1; justify-self: stretch; }
  .a3d { position: relative; inset: auto; order: 2; flex: none; height: 46svh; min-height: 280px; margin: 0 -14px; border-block: 1px solid var(--fio); }
  .a3d-comandos { order: 3; justify-content: flex-end; }
  .a3d-ajuda { margin-right: auto; }
  .a3d-pe { order: 4; }
  .a3d-lado { order: 5; max-height: none; overflow: visible; }
  .a3d-vistas > * { height: 40px; min-width: 40px; }
  /* Na tela estreita o rótulo fica só com o nome; a nota está nos painéis de baixo. */
  .a3d-rotulo span { display: none; }
  .a3d-rotulo, .a3d-rotulo:is(:hover, :active) { height: 22px; padding: 0 8px; font-size: 11px; }
  .a3d-pe .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a3d-pe .numero-cel:nth-child(odd) { border-left: 0; }
  .a3d-pe .numero-cel:nth-child(n + 3) { border-top: 1px solid var(--fio); }
  .a3d-frente-corpo { grid-template-columns: minmax(0, 1fr); }
  .a3d-grade { min-width: 34rem; }
  .a3d-celula, .a3d-celula:is(:hover, :active) { height: 30px; }
  .a3d-vao { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--fio); }
}