/* ============================================================
   WR WMS 3D — camada de aplicacao
   Depende de wrsc.css (tokens, botoes wr-btn, selos wr-selo, avisos)
   e de app.css (card, kpi, tabela). Aqui ficam o painel, as
   execucoes e o simulador. Classes do simulador com prefixo s- para
   nao herdar nada de app.css (que ja tem .barra, .val, .rot...).
   ============================================================ */

/* ---------- Tokens proprios (os tres estados de tema) ---------- */
:root {
  --hud-fundo: rgb(22 22 22 / .8);
  --hud-texto: #f2f2f2;
  --cena-ceu: #dfe1ea;
  --cena-piso: #c9cad3;
  --cena-patio: #9c9da6;
  --cena-parede: #e9e9f0;
}
:root[data-theme="dark"] {
  --hud-fundo: rgb(14 14 18 / .84);
  --cena-ceu: #121217; --cena-piso: #2a2b33; --cena-patio: #1d1e24; --cena-parede: #33343d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --hud-fundo: rgb(14 14 18 / .84);
    --cena-ceu: #121217; --cena-piso: #2a2b33; --cena-patio: #1d1e24; --cena-parede: #33343d;
  }
}

/* ---------- Painel ---------- */
.wms-hero { display: flex; gap: var(--e-6); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.wms-hero-txt { min-width: 0; flex: 1 1 340px; }
.wms-hero-txt h2 { border: 0; padding: 0; margin-bottom: var(--e-2); font-size: var(--t-xl); }
.wms-hero-cubo { color: var(--primaria-link); opacity: .9; flex: 0 0 auto; }
.wms-hero-cubo .nv-ic { width: 96px; height: 96px; stroke-width: 1.1; }
.wms-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e-4); margin: var(--e-5) 0; }
.wms-val-txt { font-size: var(--t-lg) !important; line-height: 1.3 !important; }
.wms-duas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e-5); }
.wms-amb-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wms-amb-lista li { padding: var(--e-3) 0; border-bottom: 1px solid var(--borda); display: flex; flex-direction: column; gap: 4px; }
.wms-amb-lista li:last-child { border-bottom: 0; }
@media (max-width: 900px) { .wms-duas { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Execucoes ---------- */
.wms-filtros { display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: flex-end; }
.wms-filtros .campo { min-width: 160px; }
.wms-barras { display: flex; flex-direction: column; gap: 7px; }
.wms-barra { display: grid; grid-template-columns: 210px minmax(0, 1fr) 90px; gap: var(--e-3); align-items: center; font-size: var(--t-sm); }
.wms-barra .r { color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wms-barra .t { background: var(--superficie-2); border-radius: 4px; height: 14px; overflow: hidden; }
.wms-barra .t i { display: block; height: 100%; background: var(--primaria-link); border-radius: 4px; }
.wms-barra.gargalo .t i { background: var(--atencao); }
.wms-barra .v { text-align: right; font-variant-numeric: tabular-nums; }
.wms-gargalos { display: flex; flex-direction: column; gap: var(--e-2); }
.wms-ev-url { font-family: var(--fonte-mono); font-size: 12px; word-break: break-all; }
.wms-ev pre { margin: 6px 0 0; background: var(--superficie-2); border-radius: var(--raio-sm); padding: 8px; font-size: 11px; max-height: 260px; overflow: auto; white-space: pre; }
.wms-ev details summary { cursor: pointer; color: var(--primaria-link); font: 500 var(--t-xs)/1.4 var(--fonte-titulo); }
.wms-m-GET { background: var(--sucesso-fundo); color: var(--sucesso); }
.wms-m-POST { background: var(--selo-fundo); color: var(--selo-texto); }
.wms-m-PATCH { background: var(--atencao-fundo); color: var(--atencao); }
@media (max-width: 640px) { .wms-barra { grid-template-columns: 120px minmax(0, 1fr) 70px; } }

/* ============================================================
   SIMULADOR
   ============================================================ */
.sim { display: flex; flex-direction: column; gap: var(--e-3); }
.sim-barra { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; }
.sim-barra .s-amb { margin-left: auto; display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; font-size: var(--t-sm); color: var(--texto-2); }
.s-pilula { display: inline-flex; background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-pill); padding: 3px; gap: 2px; }
.s-pilula button { background: transparent; border: 0; color: var(--texto-2); font: 500 12.5px/1 var(--fonte-titulo); padding: 7px 12px; border-radius: var(--raio-pill); cursor: pointer; transition: background var(--transicao), color var(--transicao); }
.s-pilula button[aria-pressed="true"] { background: var(--wr-azul); color: #fff; }
.s-pilula button:hover:not([aria-pressed="true"]) { color: var(--texto); }

.sim-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: var(--e-4); height: calc(100dvh - 190px); min-height: 560px; }
.s-palco { position: relative; border-radius: var(--raio-lg); overflow: hidden; background: var(--cena-ceu); min-height: 0; border: 1px solid var(--borda); }
#cena { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#cena:active { cursor: grabbing; }
#cena:focus-visible { box-shadow: inset var(--foco); border-radius: 0; }
.s-hud { position: absolute; color: var(--hud-texto); background: var(--hud-fundo); border-radius: var(--raio); font-size: 12.5px; }
.s-relogio { top: 12px; left: 12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; width: max-content; max-width: calc(100% - 24px); white-space: nowrap; }
.s-relogio .s-hora { font: 600 20px/1.2 var(--fonte-titulo); letter-spacing: .01em; }
.s-relogio .s-hud-et { color: #ccccff; font-family: var(--fonte-titulo); font-weight: 500; max-width: 270px; overflow: hidden; text-overflow: ellipsis; }
.s-relogio .s-avanco { color: #f0b545; font-family: var(--fonte-titulo); font-weight: 500; }
.s-cam { top: 12px; right: 12px; padding: 4px; display: flex; flex-wrap: wrap; gap: 2px; max-width: calc(100% - 24px); justify-content: flex-end; }
.s-cam button { background: transparent; border: 0; color: #b4b4c4; font: 500 12px/1 var(--fonte-titulo); padding: 7px 9px; border-radius: var(--raio-sm); cursor: pointer; }
.s-cam button[aria-pressed="true"] { background: var(--wr-azul); color: #fff; }
.s-cam button:hover:not([aria-pressed="true"]) { color: #fff; }
.s-legenda { left: 12px; right: 12px; margin-inline: auto; width: fit-content; bottom: 14px; padding: 10px 16px; max-width: 680px; text-align: center; font-size: 14px; line-height: 1.45; }
.s-legenda b { font-family: var(--fonte-titulo); font-weight: 600; color: #ccccff; }
.s-dica { left: 12px; bottom: 76px; padding: 7px 10px; font-size: 12px; max-width: calc(100% - 200px); }
.s-dica kbd { font-family: var(--fonte-mono); font-size: 11px; background: rgb(255 255 255 / .14); padding: 1px 5px; border-radius: 4px; }
.s-dpad { position: absolute; right: 12px; bottom: 76px; display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 4px; }
.s-dpad button { background: var(--hud-fundo); color: #fff; border: 1px solid rgb(255 255 255 / .18); border-radius: var(--raio); font: 600 16px/1 var(--fonte-titulo); cursor: pointer; touch-action: none; user-select: none; }
.s-dpad button:active { background: var(--wr-azul); }
.s-dpad .s-acao { background: var(--wr-azul); font-size: 13px; }
.s-toasts { position: absolute; top: 84px; left: 12px; display: flex; flex-direction: column; gap: 6px; max-width: min(360px, calc(100% - 24px)); pointer-events: none; }
.s-toast { background: var(--hud-fundo); color: #fff; border-left: 3px solid #f0b545; border-radius: var(--raio-sm); padding: 7px 10px; font-size: 12.5px; animation: s-entra .25s ease; }
.s-toast.s-erro { border-left-color: #ff8b82; }
.s-toast.s-ok { border-left-color: #46c98d; }
@keyframes s-entra { from { transform: translateY(-6px); opacity: .3; } to { transform: none; opacity: 1; } }

.s-painel { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-lg); display: flex; flex-direction: column; min-height: 0; box-shadow: var(--sombra-1); }
.s-abas { display: flex; border-bottom: 1px solid var(--borda); padding: 0 6px; flex-wrap: wrap; }
.s-abas button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 11px 7px 9px; font: 500 13px/1.2 var(--fonte-titulo); color: var(--texto-2); cursor: pointer; display: flex; gap: 6px; align-items: center; }
.s-abas button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--wr-azul); }
.s-contador { background: var(--superficie-2); color: var(--texto-2); border-radius: 999px; padding: 0 7px; font-size: 11px; font-variant-numeric: tabular-nums; }
.s-aba { overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; min-height: 0; flex: 1; }
.s-aba p { max-width: none; margin: 0; }
.s-aba h3 { font: 600 11px/1.3 var(--fonte-titulo); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); margin: 0; }
.s-secao { display: flex; flex-direction: column; gap: 8px; }
.s-entre { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.s-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.s-duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.s-etapas .s-grupo { list-style: none; font: 600 11px/1.3 var(--fonte-titulo); text-transform: uppercase; letter-spacing: .06em; color: var(--primaria-link); padding: 8px 0 2px; }
.s-conexao { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--superficie-2); border-radius: var(--raio); padding: 10px 12px; flex-wrap: wrap; }
.s-conexao .s-info { display: flex; flex-direction: column; font-size: 12.5px; color: var(--texto-2); min-width: 0; }
.s-conexao .s-info b { color: var(--texto); font: 600 13.5px/1.3 var(--fonte-titulo); }
.s-campo { display: flex; flex-direction: column; gap: 3px; margin: 0; font: 500 11px/1.3 var(--fonte-titulo); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); min-width: 0; }
.s-campo select, .s-campo input { text-transform: none; letter-spacing: 0; font: 400 13.5px/1.3 var(--fonte-texto); width: 100%; }

.s-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.s-kpi { background: var(--superficie-2); border-radius: var(--raio); padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.s-kpi span { font: 500 10.5px/1.3 var(--fonte-titulo); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-kpi b { font: 600 19px/1.2 var(--fonte-titulo); font-variant-numeric: tabular-nums; }

.s-ordens { display: flex; flex-direction: column; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.s-ordem { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--borda); background: var(--superficie); color: var(--texto); text-align: left; cursor: pointer; align-items: center; font: inherit; }
.s-ordem:last-child { border-bottom: 0; }
.s-ordem:hover { background: var(--superficie-2); }
.s-ordem:disabled { cursor: default; }
.s-ordem[aria-pressed="true"] { background: var(--selo-fundo); box-shadow: inset 3px 0 0 var(--wr-azul); }
.s-ordem .s-radio { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--texto-3); grid-row: span 2; }
.s-ordem[aria-pressed="true"] .s-radio { border-color: var(--primaria-link); background: radial-gradient(var(--primaria-link) 45%, transparent 50%); }
.s-ordem .s-num { font: 600 13.5px/1.3 var(--fonte-titulo); }
.s-ordem .s-sub { font-size: 12px; color: var(--texto-2); grid-column: 2; }

.s-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.s-etapa { display: grid; grid-template-columns: 26px 1fr auto; gap: 2px 10px; padding: 6px 0; position: relative; max-width: none !important; }
.s-etapa::before { content: ""; position: absolute; left: 12px; top: 30px; bottom: -6px; width: 2px; background: var(--borda); }
.s-etapa:last-child::before { display: none; }
.s-etapa .s-bola { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--fonte-titulo); background: var(--superficie-2); color: var(--texto-3); border: 2px solid var(--borda); z-index: 1; }
.s-etapa .s-nome { font: 500 13.5px/1.3 var(--fonte-titulo); align-self: center; }
.s-etapa .s-det { grid-column: 2 / 4; font-size: 12px; color: var(--texto-2); margin-top: -2px; }
.s-etapa .s-tempo { font-size: 12px; color: var(--texto-3); align-self: center; font-variant-numeric: tabular-nums; }
.s-etapa[data-estado="ativa"] .s-bola { background: var(--wr-azul); border-color: var(--wr-azul); color: #fff; box-shadow: 0 0 0 4px var(--selo-fundo); }
.s-etapa[data-estado="ok"] .s-bola { background: var(--sucesso-fundo); border-color: var(--sucesso); color: var(--sucesso); }
.s-etapa[data-estado="alerta"] .s-bola { background: var(--atencao-fundo); border-color: var(--atencao); color: var(--atencao); }
.s-etapa[data-estado="ok"]::before, .s-etapa[data-estado="alerta"]::before { background: var(--sucesso); }

.s-acaobox { display: flex; flex-direction: column; gap: 8px; background: var(--selo-fundo); border-radius: var(--raio); padding: 12px; }
.s-acaobox p { font-size: 13px; color: var(--selo-texto); }
.s-acaobox .s-linha .wr-btn { flex: 1; justify-content: center; }

.s-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.s-doc { background: var(--superficie-2); border-radius: var(--raio); padding: 8px 10px; min-width: 0; }
.s-doc span { display: block; font: 500 10.5px/1.3 var(--fonte-titulo); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.s-doc b { display: block; font: 600 12px/1.4 var(--fonte-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-tabela { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); }
.s-tabela table { font-size: 12.5px; }
.s-tabela th, .s-tabela td { padding: 6px 9px; white-space: nowrap; }
.s-tabela .s-n { text-align: right; font-variant-numeric: tabular-nums; }

.s-alertas { display: flex; flex-direction: column; gap: 6px; }
.s-alertas .wr-aviso { max-width: none; display: flex; gap: 8px; margin: 0; }
.s-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.s-chip { border: 1px solid var(--borda); background: var(--superficie); border-radius: 999px; padding: 4px 10px; font: 500 12px/1.2 var(--fonte-titulo); cursor: pointer; color: var(--texto-2); }
.s-chip[aria-pressed="true"] { background: var(--selo-fundo); color: var(--selo-texto); border-color: transparent; }
.s-eventos { display: flex; flex-direction: column; gap: 8px; }
.s-ev { border: 1px solid var(--borda); border-radius: var(--raio); padding: 9px 11px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.s-ev-cab { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--texto-3); }
.s-ev-cab .s-et { font: 600 12.5px/1.3 var(--fonte-titulo); color: var(--texto); }
.s-ev .s-url { font: 11.5px/1.4 var(--fonte-mono); word-break: break-all; color: var(--texto); }
.s-ev .s-res { font-size: 12.5px; }
.s-ev .s-cena { font-size: 12px; color: var(--texto-2); }
.s-ev details summary { cursor: pointer; font: 500 12px/1.4 var(--fonte-titulo); color: var(--primaria-link); }
.s-ev pre { margin: 6px 0 0; background: var(--superficie-2); border-radius: var(--raio-sm); padding: 8px; font-size: 11px; overflow: auto; max-height: 220px; white-space: pre; }
.s-m-GET { background: var(--sucesso-fundo); color: var(--sucesso); }
.s-m-POST { background: var(--selo-fundo); color: var(--selo-texto); }
.s-m-PATCH { background: var(--atencao-fundo); color: var(--atencao); }
.s-m-EVT { background: var(--superficie-2); color: var(--texto-2); }
.s-vazio { color: var(--texto-3); font-size: 13px; text-align: center; padding: 24px 8px; border: 1px dashed var(--borda); border-radius: var(--raio); }
.s-nota { font-size: 12px; color: var(--texto-3); }

.s-barras { display: flex; flex-direction: column; gap: 6px; }
.s-barra { display: grid; grid-template-columns: 150px 1fr 72px; gap: 8px; align-items: center; font-size: 12px; }
.s-barra .s-rot { color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-barra .s-trilho { background: var(--superficie-2); border-radius: 4px; height: 14px; overflow: hidden; }
.s-barra .s-enche { display: block; height: 100%; background: var(--primaria-link); border-radius: 4px; }
.s-barra.s-gargalo .s-enche { background: var(--atencao); }
.s-barra .s-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--texto); }

.s-cenarios { display: flex; flex-direction: column; gap: 2px; }
.s-cenario { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 9px 4px; border-bottom: 1px solid var(--borda); cursor: pointer; margin: 0; font: inherit; text-transform: none; letter-spacing: 0; color: var(--texto); }
.s-cenario:last-child { border-bottom: 0; }
.s-cenario input { grid-row: span 2; margin-top: 3px; width: 16px; height: 16px; }
.s-cenario b { font: 500 13.5px/1.3 var(--fonte-titulo); }
.s-cenario span { font-size: 12px; color: var(--texto-2); }
.s-form { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; }
.s-form .s-item { display: grid; grid-template-columns: 1fr 80px 36px; gap: 6px; }
.s-form .s-item select, .s-form .s-item input { min-width: 0; }

@media (max-width: 1180px) and (min-width: 961px) { .sim-corpo { grid-template-columns: minmax(0, 1fr) 380px; } }
@media (max-width: 960px) {
  .sim-corpo { grid-template-columns: minmax(0, 1fr); height: auto; }
  .s-palco { height: 62vh; min-height: 340px; }
  .s-aba { overflow: visible; }
  .s-dica { display: none; }
}
@media (max-width: 640px) {
  .s-cam { left: 12px; right: 12px; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; max-width: none; }
  .s-cam button { flex: none; }
  .s-relogio { top: 60px; padding: 6px 10px; }
  .s-relogio .s-hora { font-size: 16px; }
  .s-toasts { top: 128px; }
  .s-legenda { font-size: 12.5px; padding: 8px 12px; bottom: 10px; }
  .s-dpad { bottom: 96px; }
}
@media (max-width: 520px) {
  .s-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-docs { grid-template-columns: 1fr 1fr; }
  .s-barra { grid-template-columns: 90px 1fr 56px; }
}

/* ---------- 1.2: tela cheia, painel recolhível, ferramentas e minimapa ---------- */
body.sim-travado { overflow: hidden; }
.sim.sim-cheia { position: fixed; inset: 0; z-index: 1000; background: var(--fundo, var(--superficie)); padding: 10px; gap: 8px; }
.sim.sim-cheia .sim-corpo { height: calc(100dvh - 72px); min-height: 0; }
.sim:fullscreen { background: var(--fundo, var(--superficie)); }
.sim.sim-sem-painel .sim-corpo { grid-template-columns: minmax(0, 1fr); }
.sim.sim-sem-painel .s-painel { display: none; }
.s-direita { position: absolute; top: 12px; right: 12px; max-width: calc(100% - 310px); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.s-direita > .s-hud { position: static; pointer-events: auto; }
.s-direita > .s-cam { max-width: 100%; }
.s-ferr { padding: 4px; display: flex; gap: 2px; }
.s-ferr button { background: transparent; border: 0; color: #d6d6e2; width: 32px; height: 30px; border-radius: var(--raio-sm); cursor: pointer; display: grid; place-items: center; }
.s-ferr button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-ferr button[id="f-home"] svg { fill: currentColor; stroke: none; }
.s-ferr button[aria-pressed="true"] { background: rgb(255 255 255 / .16); color: #fff; }
.s-ferr button:hover { color: #fff; background: rgb(255 255 255 / .1); }
.s-mini { padding: 4px; width: 230px; max-width: 100%; }
.s-mini canvas { display: block; width: 100%; border-radius: 6px; cursor: crosshair; touch-action: none; }
.s-ajuda { left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 18px; max-width: min(420px, calc(100% - 24px)); font-size: 13px; line-height: 1.5; }
.s-ajuda b { font: 600 15px/1.3 var(--fonte-titulo); }
.s-ajuda ul { margin: 8px 0 10px; padding-left: 18px; }
.s-ajuda kbd { font-family: var(--fonte-mono); font-size: 11px; background: rgb(255 255 255 / .16); padding: 1px 5px; border-radius: 4px; }
.s-hud-acao { left: 12px; top: 84px; padding: 6px; display: flex; gap: 6px; flex-wrap: wrap; max-width: min(360px, calc(100% - 24px)); }
.sim-sem-painel .s-toasts { top: 136px; }
.s-mini-btn { border: 1px solid var(--borda); background: var(--superficie); color: var(--texto); border-radius: 999px; padding: 2px 9px; font: 500 11.5px/1.5 var(--fonte-titulo); cursor: pointer; }
.s-hud .s-mini-btn { background: var(--wr-azul); color: #fff; border-color: transparent; }
.s-doc-nfe { grid-column: span 3; display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: center; }
.s-doc-nfe > span:first-child { grid-column: 1; }
.s-doc-nfe > b { grid-column: 1; }
.s-doc-acoes { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 4px; }
.s-doc-acoes .s-mini-btn { text-transform: none; letter-spacing: 0; color: var(--primaria-link); }

/* ---------- DANFE ---------- */
.s-dlg { border: 0; border-radius: var(--raio-lg); padding: 0; width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2, 0 10px 40px rgb(0 0 0 / .35)); }
.s-dlg::backdrop { background: rgb(10 10 20 / .55); }
.s-dlg-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--borda); position: sticky; top: 0; background: var(--superficie); z-index: 2; }
.s-dlg-cab h2 { font-size: 16px; margin: 0; }
.s-dlg-corpo { padding: 14px; overflow: auto; max-height: calc(100dvh - 110px); background: #e9e9ef; }
.danfe { position: relative; background: #fff; color: #111; font: 10.5px/1.25 Arial, Helvetica, sans-serif; padding: 10px; max-width: 900px; margin: 0 auto; overflow: hidden; }
.danfe h4 { font: 700 9.5px/1.2 Arial, sans-serif; text-transform: uppercase; margin: 6px 0 2px; color: #111; letter-spacing: 0; }
.danfe .dl { display: flex; border: 1px solid #111; border-bottom: 0; }
.danfe .dl + h4 { margin-top: 6px; }
.danfe .dl:has(+ h4), .danfe .dl:last-child, .danfe .dl.danfe-canhoto, .danfe .dl.danfe-topo { border-bottom: 1px solid #111; }
.danfe .dc { flex: 1; padding: 2px 4px; border-right: 1px solid #111; min-width: 0; display: flex; flex-direction: column; }
.danfe .dc:last-child { border-right: 0; }
.danfe .dc span { font-size: 7.5px; text-transform: uppercase; color: #333; }
.danfe .dc b { font-size: 10.5px; font-weight: 600; overflow-wrap: anywhere; }
.danfe .dc.g2 { flex: 2; } .danfe .dc.g3 { flex: 3; } .danfe .dc.alto { min-height: 54px; } .danfe .dc.forte b { font-size: 12px; }
.danfe-canhoto { margin-bottom: 8px; border-style: dashed !important; }
.danfe-nfmini { flex: 0 0 110px !important; align-items: center; justify-content: center; }
.danfe-topo .danfe-emit { flex: 3; justify-content: center; gap: 2px; }
.danfe-emit-nome { font-size: 13px !important; }
.danfe-topo .danfe-box { flex: 0 0 150px; align-items: center; text-align: center; gap: 1px; }
.danfe-tit { font-size: 16px !important; }
.danfe-es { font-size: 8px !important; text-transform: none !important; }
.danfe-es i { font-style: normal; border: 1px solid #111; padding: 0 5px; font-size: 12px; font-weight: 700; margin-left: 4px; }
.danfe-chave { flex: 4 !important; gap: 2px; }
.danfe-chave .mono { font-family: ui-monospace, monospace; font-size: 10.5px; letter-spacing: .02em; }
.danfe-barras { width: 100%; height: 44px; fill: #000; }
.danfe-rolar { overflow-x: auto; }
.danfe-itens { width: 100%; border-collapse: collapse; font-size: 9px; }
.danfe-itens th, .danfe-itens td { border: 1px solid #111; padding: 2px 3px; text-align: left; white-space: nowrap; color: #111; background: #fff; }
.danfe-itens th { font-size: 7.5px; text-transform: uppercase; }
.danfe-itens .n { text-align: right; }
.danfe-marca { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) rotate(-24deg); font: 700 64px/1 Arial, sans-serif; color: rgb(192 39 29 / .14); white-space: nowrap; pointer-events: none; z-index: 1; }
@media print { .danfe { max-width: none; padding: 0; } }
@media (max-width: 640px) {
  .s-direita { left: 12px; max-width: none; }
  .s-direita > .s-cam { align-self: stretch; }
  .s-mini { width: 52%; }
  .s-hud-acao { top: 112px; }
  .s-pilula { max-width: 100%; overflow-x: auto; }
  .s-pilula button { white-space: nowrap; flex: none; }
  .danfe-topo { flex-wrap: wrap; }
}

/* ---------- 1.3: conceitos do D365 (cartão no HUD e árvore de documentos) ---------- */
.s-conceito { width: 340px; max-width: 100%; padding: 12px 14px; border-left: 4px solid var(--conc-cor, var(--wr-azul)); display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; animation: s-entra .25s ease; z-index: 3; }
.s-conceito > .s-entre:first-child { flex-wrap: nowrap; }
.s-conceito .cc-tipo { flex: 1; min-width: 0; font: 600 11px/1.3 var(--fonte-titulo); text-transform: uppercase; letter-spacing: .06em; color: #ccccff; }
.s-conceito .cc-id { font-size: 14px; color: #fff; }
.s-conceito .cc-texto { margin: 0; color: #e8e8f0; }
.s-conceito .cc-rel { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #c8c8d6; }
.s-conceito .cc-menu { font-size: 11px; color: #a9a9bb; }
.cc-x { background: none; border: 0; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.cc-link { background: rgb(255 255 255 / .12); border: 0; color: #fff; border-radius: 999px; padding: 1px 8px; margin: 1px 2px; font: 500 11.5px/1.5 var(--fonte-titulo); cursor: pointer; }
.cc-link:hover { background: var(--wr-azul); }
.cc-arvore, .cc-arvore ul { list-style: none; margin: 0; padding: 0; }
.cc-arvore ul { margin-left: 14px; padding-left: 10px; border-left: 2px solid var(--borda); }
.cc-arvore li { margin: 3px 0; max-width: none; }
.cc-no { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; width: 100%; text-align: left; background: var(--superficie-2); border: 1px solid transparent; border-left: 4px solid var(--conc-cor); border-radius: var(--raio-sm); padding: 6px 9px; cursor: pointer; color: var(--texto); font: inherit; }
.cc-no:hover { border-color: var(--borda); }
.cc-no.cc-sel { background: var(--selo-fundo); border-color: var(--conc-cor); }
.cc-no-tipo { font: 600 12.5px/1.3 var(--fonte-titulo); }
.cc-no-id { font: 500 12px/1.3 var(--fonte-mono); color: var(--texto-2); }
.cc-no-st { margin-left: auto; font-size: 11.5px; color: var(--texto-3); }
.cc-det { margin-top: 12px; border: 1px solid var(--borda); border-left: 4px solid var(--conc-cor); border-radius: var(--raio); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cc-det p { margin: 0; }
@media (max-width: 640px) { .s-conceito { width: 100%; } }
.cc-det-r { background: var(--superficie-2); border-radius: var(--raio-sm); padding: 6px 10px; }
.cc-det-r summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.cc-det-r p { margin: 6px 0 0; max-width: 80ch; }
@media (prefers-reduced-motion: reduce) { .s-toast { animation: none; } .s-conceito { animation: none; } }

/* ---------- Motor 3D: link entre Simulador (three.js) e Vitrine (Babylon.js) ---------- */
.s-pilula a { color: var(--texto-2); font: 500 12.5px/1 var(--fonte-titulo); padding: 7px 12px; border-radius: var(--raio-pill); text-decoration: none; white-space: nowrap; transition: background var(--transicao), color var(--transicao); }
.s-pilula a:hover { color: var(--texto); background: rgb(127 127 127 / .12); }
.s-pilula a:focus-visible { box-shadow: var(--foco); outline: none; }

/* ---------- Vitrine 3D (Babylon.js 9) ---------- */
.vt-palco { height: calc(100dvh - 230px); min-height: 520px; }
.vt-palco:fullscreen { height: 100%; border-radius: 0; border: 0; }
#vt-cena { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; }
#vt-cena:active { cursor: grabbing; }
#vt-cena:focus-visible { box-shadow: inset var(--foco); }
.vt-carga { position: absolute; inset: 0; display: grid; place-items: center; color: var(--hud-texto); background: var(--cena-ceu); font: 500 14px/1.4 var(--fonte-titulo); text-align: center; padding: 16px; }
.vt-ficha { left: 12px; bottom: 12px; padding: 10px 14px; max-width: min(440px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 3px; }
.vt-ficha b { font: 600 15px/1.2 var(--fonte-titulo); }
.vt-ficha span { color: #d6d6e2; line-height: 1.45; }
.vt-rodape { right: 12px; bottom: 12px; padding: 6px 10px; display: flex; gap: 10px; color: #d6d6e2; }
.vt .s-direita { max-width: calc(100% - 24px); }
.vt-nota { margin: 0; color: var(--texto-2); font-size: var(--t-sm); max-width: 110ch; }
@media (max-width: 640px) {
  .vt-palco { height: 70dvh; min-height: 380px; }
  .vt-rodape span:first-child { display: none; }
  .vt-ficha { bottom: 48px; }
}

/* Palco estreito (painel aberto em tela pequena): as ferramentas descem
   para baixo do relógio em vez de espremer os botões de câmera. */
.s-palco { container-type: inline-size; }
@container (max-width: 700px) {
  .s-direita { top: 86px; left: 12px; right: 12px; max-width: none; }
  .s-direita > .s-cam { flex-wrap: wrap; justify-content: flex-end; }
}