/* ============ WMS · SM PRO — mapa do armazém ============
   O desenho (.desenho) é o mesmo no painel e na tela de entrada: chão, estante em traço cinza e
   caixas em sólido cinza, como as figuras do SM PRO. Cor só informa: âmbar = em separação,
   vermelho = diverge do SSW, azul = a rua escolhida. O resto é o palco navegável do painel. */

/* ---------- O desenho ---------- */
.desenho { display: block; width: 100%; height: 100%; overflow: visible; }
.desenho path { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.desenho .piso { fill: none; stroke: var(--fio); stroke-width: 1; }
.desenho .chao { fill: color-mix(in oklab, var(--forte) 4%, transparent); stroke: none; }
/* As costas da estante tapam a rua de trás, que senão vaza pelos vãos vazios. */
.desenho .costas { fill: color-mix(in oklab, var(--chao) 82%, transparent); stroke: none; }
.desenho .fundo { fill: none; stroke: var(--fio); stroke-width: .7; }
.desenho .mont { fill: none; stroke: color-mix(in oklab, var(--estante) 70%, var(--chao)); stroke-width: 1; }
.desenho .long { fill: none; stroke: var(--viga); stroke-width: 1; }
.desenho .cx path { fill: var(--caixa); stroke: var(--caixa-traco); stroke-width: .8; transition: fill var(--rapido) var(--curva); }
.desenho .cx .t { fill: var(--caixa-topo); }
.desenho .cx.r path { fill: color-mix(in oklab, var(--ambar) 40%, var(--caixa)); stroke: var(--ambar); }
.desenho .cx.r .t { fill: color-mix(in oklab, var(--ambar) 62%, var(--caixa)); }
.desenho .cx.a path { fill: color-mix(in oklab, var(--vermelho) 40%, var(--caixa)); stroke: var(--vermelho); }
.desenho .cx.a .t { fill: color-mix(in oklab, var(--vermelho) 62%, var(--caixa)); }
.desenho .rot rect { fill: var(--botao); stroke: var(--fio-forte); stroke-width: 1; transition: fill var(--rapido) var(--curva); }
.desenho .rot text { fill: var(--forte); font: 700 11px var(--mono); text-anchor: middle; }
.desenho .rua { transition: opacity var(--medio) var(--curva); }
.desenho .rua.fora { opacity: .1; }
.desenho .rua.fora .rot { display: none; }
.desenho .rua.foco .mont, .login-figura .mont { stroke: var(--forte); stroke-width: 1.2; }
/* Na entrada o desenho é enfeite, sem legenda: nenhuma caixa leva cor de estado. */
.login-figura .cx:is(.r, .a) path { fill: var(--caixa); stroke: var(--caixa-traco); }
.login-figura .cx:is(.r, .a) .t { fill: var(--caixa-topo); }
.desenho .rua.foco .long, .login-figura .long { stroke: var(--estante); stroke-width: 1.2; }
.desenho .rua.foco .rot rect { fill: var(--azul); stroke: var(--azul); }
.desenho .rua.foco .rot text { fill: var(--sobre-azul); }
/* O momento autoral: na abertura e ao girar, as ruas pousam uma a uma, da mais distante para a mais próxima. */
@keyframes pousar { from { opacity: 0; transform: translateY(-18px); } }
.desenho .anima .rua { animation: pousar 620ms var(--curva) backwards; animation-delay: calc(var(--o, 0) * 80ms + 80ms); }

/* ---------- O palco do painel ---------- */
.mapa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mapa > .bloco-topo { margin-bottom: calc(var(--by) - 12px); padding-block: 3px; }
.mapa-ruas { overflow-x: auto; scrollbar-width: none; }
.mapa-ruas > * { height: 28px; }

.mapa-cena { position: relative; display: grid; gap: 10px; }
.mapa-palco { position: relative; aspect-ratio: var(--aspecto, 1.6); border-radius: 12px; background: var(--chao); border: 1px solid var(--fio); overflow: hidden; }
/* Com uma rua em foco o palco achata: sobra tela para a rua de frente, que é onde se lê o endereço. */
.mapa-palco.em-foco { aspect-ratio: calc(var(--aspecto, 1.6) * var(--achatado, 1.5)); }
.mapa-quadro { position: absolute; inset: 0; display: flex; align-items: center; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mapa-quadro.arrastando { cursor: grabbing; }
/* O plano tem a proporção do desenho, então as frações de foco valem mesmo quando o palco é mais baixo ou mais alto. */
.mapa-plano { position: relative; flex: none; width: 100%; aspect-ratio: var(--aspecto, 1.6); transform-origin: 0 0; transition: transform 640ms var(--curva); }
.mapa-plano .desenho { position: absolute; inset: 0; }
.arrastando .mapa-plano { transition: none; }
.mapa-quadro .cx, .mapa-quadro .rot { cursor: pointer; }
.mapa-quadro:not(.arrastando) .cx:hover path { fill: color-mix(in oklab, var(--forte) 45%, var(--caixa)); stroke: var(--forte); }
.mapa-quadro:not(.arrastando) .rua:not(.foco):hover .rot rect { fill: var(--acao); stroke: var(--acao); }
.mapa-quadro:not(.arrastando) .rua:not(.foco):hover .rot text { fill: var(--sobre-acao); }

.mapa-controles { position: absolute; right: 8px; bottom: 8px; display: grid; gap: 2px; }
.mapa-controles .botao-icone { width: 30px; height: 30px; }

.mapa-dica {
  position: fixed; z-index: 20; pointer-events: none; padding: 5px 9px; border-radius: var(--raio); white-space: nowrap;
  font: 500 12px var(--mono); color: var(--forte); background: var(--face); border: 1px solid var(--fio); box-shadow: var(--sombra-2);
}

.mapa-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 12px; }
.mapa-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.mapa-legenda span:has(.lg) { font: var(--rotulo); color: var(--forte); }
.lg { --c: var(--caixa-traco); width: 10px; height: 10px; background: var(--caixa); border: 1px solid var(--c); }
.lg.r { --c: var(--ambar); } .lg.a { --c: var(--vermelho); }
.lg:is(.r, .a) { background: color-mix(in oklab, var(--c) 50%, var(--caixa)); }
.mapa-legenda .so-toque { display: none; }
@media (hover: none) and (pointer: coarse) {
  .mapa-legenda .so-ponteiro { display: none; }
  .mapa-legenda .so-toque { display: inline-flex; }
}

/* ---------- A rua de frente (no painel, sob o mapa; em Endereços, uma por bloco) ---------- */
.frente { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--fio); scroll-margin-bottom: 20px; }
.ruas { display: grid; gap: 12px; }
.ruas .frente { padding-top: 0; border-top: 0; }
.frente-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.frente-topo h3 { font: 640 14px/1.4 var(--fonte); }
.frente-topo small { font-size: 12px; color: var(--apagado); }
.frente-rolo { overflow-x: auto; padding-bottom: 4px; }
.frente-grade { display: grid; gap: 3px; align-items: stretch; min-width: max-content; }
.frente-eixo { display: grid; place-items: center; min-width: 26px; font: 400 11px var(--mono); color: var(--apagado); }
/* O eixo dos níveis fica parado quando a grade rola de lado. */
.frente-eixo.nivel { position: sticky; left: 0; z-index: 1; background: var(--placa); }
.vao {
  display: grid; place-items: center; height: 30px; padding: 0 4px; border-radius: 6px; text-decoration: none; white-space: nowrap;
  font: 400 11px var(--mono); color: var(--forte); border: 1px solid var(--fio);
  transition: border-color var(--rapido) var(--curva), background-color var(--rapido) var(--curva);
}
.vao.vazio { border-style: dashed; }
.vao.nao { border: 0; background: repeating-linear-gradient(135deg, transparent 0 5px, var(--fio) 5px 6px); }
/* Mesmas cores da legenda do desenho: ocupado cinza, em separação âmbar, diverge vermelho. */
.vao.cheio { --c: var(--caixa-traco); background: color-mix(in oklab, var(--c) 22%, var(--placa)); border-color: color-mix(in oklab, var(--c) 60%, transparent); }
.vao.cheio.r { --c: var(--ambar); } .vao.cheio.a { --c: var(--vermelho); }
a.vao:hover { border-color: var(--forte); background: color-mix(in oklab, var(--c, var(--forte)) 34%, var(--placa)); }

@media (max-width: 719px) {
  .mapa > .bloco-topo { flex-wrap: wrap; }
  /* No celular a ficha da rua fica miúda no desenho; quem diz a rua são os botões de cima. O vão tem 40 px para o dedo. */
  .mapa-quadro .rot { display: none; }
  .mapa-legenda { gap: 6px 10px; }
  .mapa-legenda span:has(.lg) { gap: 5px; letter-spacing: .04em; }
  .frente { --vao-min: 40px; }
  .mapa-ruas { flex: 1 1 100%; }
  .mapa-ruas > * { height: 40px; }
  /* A barra de baixo é fixa: a rua de frente para acima dela, e abaixo da barra de cima. */
  .frente { scroll-margin: 64px 0 calc(84px + env(safe-area-inset-bottom, 0px)); }
  .mapa-palco { aspect-ratio: auto; height: 250px; }
  .mapa-palco.em-foco { aspect-ratio: auto; height: 170px; }
  /* No celular os controles saem de cima do desenho e viram uma fileira logo abaixo. */
  .mapa-controles { position: static; grid-auto-flow: column; justify-content: end; gap: 4px; }
  .mapa-controles .botao-icone { width: 44px; height: 40px; }
  .vao { height: 40px; }
}