/* Demonstração "centro de peças" (N-776) — só os estilos desta demo; o resto vem do kit. Prefixo: wh-. */
.d-side button svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.d-side .n.warn{background:rgba(240,112,112,.2);color:var(--red)}
.kpi .v.good{color:var(--accent)} .kpi .v.warn{color:var(--amber)} .kpi .v.bad{color:var(--red)}
.wh-live::before{animation:whPulse 1.8s ease-in-out infinite}
@keyframes whPulse{0%,100%{box-shadow:0 0 0 0 rgba(43,214,110,.6)}50%{box-shadow:0 0 0 5px rgba(43,214,110,0)}}
.btn.wh-sm{padding:4px 11px;font-size:.78rem;border-radius:8px}
.wh-cardhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:10px}
.wh-cardhead h2{margin:0}
.wh-count{font-size:.76rem;margin:8px 0 6px}
table.t tr.wh-bad td{background:rgba(240,112,112,.07)}
table.t tr.wh-bad td:first-child{box-shadow:inset 3px 0 0 var(--red)}
table.t td.r .btn + .btn{margin-left:6px}

/* cores das etapas (mapa, legenda e lista) */
.tk-truck{--c:var(--blue)} .tk-insp{--c:var(--amber)} .tk-rack{--c:var(--teal)} .tk-pick{--c:#B79CFF} .tk-stage{--c:var(--accent)} .tk-ship{--c:#5B6B80}

/* ---------- mapa ---------- */
.row > .wh-mapcard{flex:3 1 560px;padding:12px}
.row > .wh-side{flex:1 1 250px}
.wh-mapscroll{overflow-x:auto}
.wh-map{display:block;width:100%;min-width:620px;height:auto}
.wh-map .z{fill:rgba(18,31,49,.75);stroke:var(--line-2);stroke-width:1}
.wh-map .z.busy{stroke:var(--blue);fill:rgba(106,174,255,.09)}
.wh-map .z.risk{stroke:var(--red);fill:rgba(240,112,112,.09);animation:whRisk 1.6s ease-in-out infinite}
.wh-map .z.gone{stroke-dasharray:4 4;fill:rgba(18,31,49,.3)}
.wh-map .z.road{fill:rgba(12,21,34,.8);stroke-dasharray:6 6}
@keyframes whRisk{50%{fill:rgba(240,112,112,.2)}}
.wh-map .cell{fill:rgba(7,12,21,.7);stroke:var(--line-2);stroke-width:1}
.wh-map text{font-family:var(--font-body)}
.wh-map .zh{fill:var(--fg-soft);font-size:11.5px;font-weight:600}
.wh-map .zl{fill:var(--fg-soft);font-size:11px}
.wh-map .zs{fill:var(--fg-soft);font:10.5px var(--font-mono)}
.wh-map .zs.bad{fill:var(--red)}
.wh-map .cl{fill:var(--fg-faint);font:9.5px var(--font-mono)}
.wh-map .trk rect,.wh-map .trk path{fill:var(--bg-4);stroke:var(--fg-soft);stroke-width:1.2}
.wh-map .trk circle{fill:var(--bg);stroke:var(--fg-soft);stroke-width:1.2}
.wh-map .trk.late rect,.wh-map .trk.late path,.wh-map .trk.late circle{stroke:var(--red)}
.wh-map .trk.in rect,.wh-map .trk.in path,.wh-map .trk.in circle{stroke:var(--blue)}
.wh-map .tk{cursor:pointer;transition:transform 1.5s cubic-bezier(.45,0,.2,1);outline:none}
.wh-map .tk rect{fill:var(--c);stroke:rgba(7,12,21,.9);stroke-width:1.5}
.wh-map .tk-ship rect{opacity:.75}
.wh-map .tk .ring{fill:none;stroke:none}
.wh-map .tk:hover rect,.wh-map .tk:focus-visible rect{stroke:#fff}
.wh-map .tk.sel rect{stroke:#fff;stroke-width:2.2}
.wh-map .tk.sel .ring{stroke:#fff;stroke-width:1.5;stroke-dasharray:3 3;animation:whSpin 6s linear infinite}
.wh-map .tk.hit .ring{stroke:var(--c);stroke-width:2;animation:whHit 1.3s ease-out infinite}
@keyframes whSpin{to{stroke-dashoffset:-60}}
@keyframes whHit{0%{r:9;opacity:1}100%{r:20;opacity:0}}
.wh-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.76rem;color:var(--fg-soft);padding:8px 4px 0}
.wh-legend span{display:inline-flex;align-items:center;gap:6px}
.wh-legend i,.wh-hit i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:none}

.wh-find{display:grid;gap:6px;font-size:.8rem;color:var(--fg-soft)}
.wh-hits{display:grid;gap:4px}
.wh-hit{display:grid;grid-template-columns:10px auto;align-items:center;gap:2px 8px;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 9px;color:var(--fg);font:inherit;font-size:.82rem;cursor:pointer}
.wh-hit span{grid-column:2;color:var(--fg-soft);font-size:.76rem}
.wh-hit:hover,.wh-hit.on{border-color:var(--accent)}
.wh-det{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.wh-det .empty{padding:8px 0;text-align:left}
.wh-dh h2{font-size:1.05rem;margin:2px 0 8px}
.wh-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0;font-size:.84rem}
.wh-dl dt{color:var(--fg-faint)} .wh-dl dd{margin:0}
.wh-dl dd.strong{color:var(--accent);font-weight:600}
.wh-h3{font-size:.86rem;margin:14px 0 6px}
.wh-steps{list-style:none;margin:0 0 12px;padding:0;display:grid}
.wh-steps li{display:flex;justify-content:space-between;gap:10px;padding:4px 0 4px 18px;position:relative;font-size:.82rem;color:var(--fg-faint)}
.wh-steps li::before{content:'';position:absolute;left:3px;top:10px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--fg-faint);background:var(--bg-2)}
.wh-steps li::after{content:'';position:absolute;left:6.5px;top:19px;bottom:-9px;width:1.5px;background:var(--line-2)}
.wh-steps li:last-child::after{display:none}
.wh-steps li.done{color:var(--fg-soft)} .wh-steps li.done::before{background:var(--accent-deep);border-color:var(--accent-deep)}
.wh-steps li.on{color:var(--fg);font-weight:600} .wh-steps li.on::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}
.wh-steps time{font-size:.76rem;font-weight:400}

/* ---------- caminhões ---------- */
.row > .wh-tlcard{flex:2 1 460px}
.wh-tl{display:block;width:100%;min-width:560px;height:auto}
.wh-tl .grid{stroke:var(--line);stroke-width:1}
.wh-tl .ax{fill:var(--fg-faint);font:10.5px var(--font-mono)}
.wh-tl .bar{fill:var(--bg-4);stroke:var(--line-2)}
.wh-tl .bar.done{fill:rgba(43,214,110,.22);stroke:var(--accent-deep)}
.wh-tl .bar.unload{fill:rgba(106,174,255,.25);stroke:var(--blue)}
.wh-tl .bar.late{fill:rgba(240,112,112,.25);stroke:var(--red)}
.wh-tl .bar.ghost{fill:none;stroke:var(--red);stroke-dasharray:4 3;opacity:.6}
.wh-tl .bl{fill:var(--fg);font:600 11px var(--font-mono)}
.wh-tl .now{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 3}
.wh-auto{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wh-auto li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;font-size:.84rem;line-height:1.45;padding:8px 10px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px}
.wh-auto time{color:var(--fg-faint);font-size:.76rem;padding-top:2px}

/* ---------- conferência ---------- */
.row > .wh-sliplist{flex:1 1 240px}
.row > .wh-papercard{flex:2 1 380px;position:relative}
.wh-slip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:center;width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:6px;color:var(--fg);font:inherit;font-size:.84rem;cursor:pointer}
.wh-slip span{color:var(--fg-soft);font-size:.78rem}
.wh-slip .badge{grid-column:2;justify-self:start}
.wh-slip:hover,.wh-slip.on{border-color:var(--accent)}
.wh-slip.on{background:var(--bg-hit)}
.wh-photo{font-size:.74rem;margin-bottom:8px}
.wh-paper{position:relative;overflow:hidden;background:#F3F0E6;color:#1B2230;border-radius:4px;padding:16px 18px 20px;max-width:440px;transform:rotate(-1.2deg);box-shadow:0 14px 34px rgba(0,0,0,.5);font:13px/1.5 'IBM Plex Sans JP','IBM Plex Sans',sans-serif}
.wh-ptitle{font-weight:700;font-size:1.05rem;letter-spacing:.3em;text-align:center;border-bottom:2px solid #1B2230;padding-bottom:4px;margin-bottom:6px}
.wh-pmeta{font-size:.74rem;color:#4A5568;margin-bottom:8px}
.wh-prow{display:grid;grid-template-columns:86px minmax(0,1fr) 60px;gap:8px;padding:5px 4px;border-bottom:1px solid #C9C3B0;font-family:var(--font-mono);font-size:.8rem}
.wh-prow span:last-child{text-align:right;font-weight:600}
.wh-prow.read{background:rgba(43,214,110,.3)}
.wh-stamp{position:absolute;right:16px;bottom:10px;width:30px;height:30px;border:2px solid #C0392B;color:#C0392B;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;opacity:.75;transform:rotate(12deg)}
.wh-paper.scanning::after{content:'';position:absolute;left:0;right:0;top:0;height:36px;background:linear-gradient(180deg,transparent,rgba(43,214,110,.55));border-bottom:2px solid #17A562;animation:whScan 1.5s ease-in-out infinite}
@keyframes whScan{0%{transform:translateY(-36px)}100%{transform:translateY(240px)}}
.wh-scanmsg{margin-top:12px;font-size:.84rem;color:var(--accent)}
.wh-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.wh-alert{border-color:rgba(240,112,112,.5)}
.wh-alert h2{color:var(--red)}
.wh-msg{margin:8px 0 12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:.84rem/1.7 var(--font-body);color:var(--fg);white-space:pre-wrap;overflow-wrap:anywhere}
html[lang="ja"] .wh-msg{font-family:'IBM Plex Sans JP',sans-serif}

/* ---------- expedição ---------- */
.wh-bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.wh-bin{display:grid;gap:3px;justify-items:start;text-align:left;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;color:var(--fg);font:inherit;font-size:.84rem;cursor:pointer}
.wh-bin b{font:700 1.1rem var(--font-display)}
.wh-bin .mono{font-size:1.25rem;font-weight:500}
.wh-bin:hover{border-color:var(--line-2)}
.wh-bin.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.wh-bin.risk{border-color:rgba(240,112,112,.6)}
.wh-bin.risk.on{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.wh-bin.left{opacity:.65}
.wh-bar{display:block;width:100%;height:7px;border-radius:99px;background:var(--bg-4);overflow:hidden;margin:6px 0 2px}
.wh-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-deep),var(--accent));transition:width .5s}
.wh-bin.risk .wh-bar i{background:var(--red)}
table.t td.wh-where{white-space:normal;min-width:15em;color:var(--fg-soft);font-size:.8rem}
.wh-ai{border-color:rgba(43,214,110,.45);background:linear-gradient(180deg,rgba(43,214,110,.08),var(--bg-2) 60%)}
.wh-ai p{margin:0 0 12px;font-size:.9rem}

/* ---------- assistente ---------- */
.row > .wh-chat{flex:2 1 380px;display:flex;flex-direction:column}
.row > .wh-rep{flex:2 1 340px}
.wh-msgs{display:flex;flex-direction:column;gap:8px;min-height:240px;max-height:420px;overflow-y:auto;padding:2px 2px 8px}
.wh-b{max-width:88%;border-radius:12px;padding:8px 12px;font-size:.88rem;line-height:1.55}
.wh-b p{margin:0}
.wh-b p + p{margin-top:4px}
.wh-b.a{align-self:flex-start;background:var(--bg-3);border:1px solid var(--line)}
.wh-b.u{align-self:flex-end;background:var(--accent);color:var(--on-accent)}
.wh-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.wh-form{display:flex;gap:8px}
.wh-form .in{flex:1;min-width:0}
.wh-rep .wh-msg{margin-bottom:0;font-size:.82rem;max-height:460px;overflow:auto}
.wh-res{border-color:rgba(43,214,110,.45);background:linear-gradient(180deg,rgba(43,214,110,.09),var(--bg-2) 55%)}
.wh-resgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.wh-resgrid > div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:2px;align-content:start}
.wh-resgrid b{font:700 1.45rem var(--font-display);color:var(--accent);line-height:1.2}
.wh-resgrid .l{font-size:.84rem;font-weight:600}
.wh-resgrid .d{font-size:.76rem;color:var(--fg-soft)}

/* ---------- antes ---------- */
.wh-before{border-color:rgba(242,181,68,.45);max-width:760px}
.wh-before h1{font-size:1.3rem}
.wh-before ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.wh-before li{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:.9rem}
.wh-before li b{color:var(--amber);font-family:var(--font-display)}
.wh-before li:nth-child(2){animation-delay:.5s}.wh-before li:nth-child(3){animation-delay:1s}.wh-before li:nth-child(4){animation-delay:1.5s}
.wh-before li.pop{animation-fill-mode:backwards}

/* ---------- teia de fios no fundo da página inteira (founder 14/11, opção A) ----------
   canvas fixo atrás de tudo; o app e a faixa do Simular ficam por cima (a faixa volta a ser presa no topo na simulação) */
.d-teia{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.d-app{position:relative;z-index:1}
.d-sim{position:relative;z-index:1}
.d-running .d-sim{position:sticky;z-index:39}