.bx-vistas{display:flex;gap:6px;margin:8px 0}
.bx-pill{border:1px solid var(--btx-c300);background:var(--btx-papel);border-radius:16px;padding:4px 12px;cursor:pointer;font-size:13px}
.bx-pill.on{background:var(--btx-c700);color:var(--btx-papel);border-color:var(--btx-c700)}
.bx-mapwrap{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.bx-map{flex:0 0 auto}.bx-svg{width:320px;max-width:100%;height:auto;border:1px solid var(--btx-c200);border-radius:8px;background:var(--btx-papel);cursor:crosshair}
.bx-svg[data-edit]{touch-action:none}
/* no toque, arrastar ponto não rola a página */
.bx-svg[data-edit] .bx-pt{cursor:pointer}
.bx-resumo{flex:1 1 220px;min-width:200px}
.bx-tab{width:100%;border-collapse:collapse;font-size:12px}.bx-tab th,.bx-tab td{border-bottom:1px solid var(--btx-c150);padding:3px 6px;text-align:left}
.bx-total{margin-top:8px;font-size:14px}
.bx-legenda{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0}
.bx-lg{display:inline-flex;align-items:center;gap:5px;font-size:12px}.bx-lg i{width:12px;height:12px;border-radius:50%;display:inline-block}
.bx-prodbox{border:1px solid var(--btx-c200);border-radius:8px;padding:8px;margin:8px 0}
.bx-prodhdr{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.bx-prodrow{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin:6px 0;padding:4px}.bx-prodrow.on{background:var(--btx-sel);border-radius:6px}
.bx-prodpill{width:26px;height:26px;border-radius:50%;border:2px solid var(--btx-papel);box-shadow:0 0 0 1px var(--btx-c300);color:var(--btx-papel);cursor:pointer;align-self:center;flex:0 0 auto}
.bx-pfl{display:flex;flex-direction:column;gap:2px;font-size:10px;color:var(--btx-c500)}
.bx-prodrow .am-inp,.bx-prodrow .dataBR{height:30px;border:1px solid var(--btx-c300);border-radius:5px;padding:2px 6px;font-size:13px;box-sizing:border-box}
.bx-inp-cor{width:38px;height:30px;padding:0;border:1px solid var(--btx-c300);border-radius:5px}
.bx-w-marca{width:150px}.bx-w-u{width:140px}.bx-w-lote{width:120px}.bx-w-dt{width:104px}
.bx-prodhelp{font-size:11px;color:var(--btx-c400);margin-top:4px}
.bx-del{background:none;border:none;color:var(--btx-del);cursor:pointer;font-size:14px;align-self:center}
.bx-row{margin:8px 0}.bx-row label{display:block;font-size:12px;color:var(--btx-c500);margin-bottom:2px}
.bx-clin{display:flex;gap:12px;flex-wrap:wrap}.bx-f label{font-size:12px;color:var(--btx-c500);margin-right:4px}
.bx-hint,.bx-obs{font-size:12px;color:var(--btx-c500);margin:6px 0}
.bx-lixeira{display:flex;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--btx-c300);border-radius:8px;padding:9px;color:var(--btx-c400);font-size:13px;background:var(--btx-c50);transition:all .12s}
.bx-lixeira.over{border-color:var(--btx-del);color:var(--btx-del);background:var(--btx-del-bg);transform:scale(1.02)}
.bx-pt-lixo circle{opacity:.35}.bx-pt-lixo{cursor:grabbing}
.bx-fs .bx-lixeira{background:var(--btx-c800);border-color:var(--btx-c600);color:var(--btx-c400)}.bx-fs .bx-lixeira.over{background:var(--btx-del-bg-fs);border-color:var(--btx-del-fs);color:var(--btx-del-fs)}
.bx-hover{font-size:13px;font-weight:600;color:var(--btx-c700);background:var(--btx-c100);border:1px solid var(--btx-c200);border-radius:6px;padding:4px 8px;margin-bottom:4px;min-height:22px}
.bx-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.bx-ptbl td,.bx-ptbl th{padding:3px 6px}.bx-ptreg{min-width:150px}.bx-ptu{width:58px}.bx-pttec{min-width:130px}
.bx-svg[data-edit] .bx-pt{cursor:grab}.bx-svg[data-edit] .bx-pt:active{cursor:grabbing}
/* realce do ponto selecionado (clique na linha da tabela ⇄ diagrama) */
@keyframes bxsel{0%,100%{stroke-width:2;filter:drop-shadow(0 0 2px rgba(var(--btx-acento-rgb),.7))}50%{stroke-width:5.5;filter:drop-shadow(0 0 8px rgba(var(--btx-acento-rgb),1))}}
.bx-pt-sel circle{stroke:var(--btx-acento);animation:bxsel 1.1s ease-in-out infinite}
/* realce translúcido: legível em tema claro E escuro (não pinta fundo sólido) */
.bx-ptbl tbody tr{cursor:pointer}.bx-ptbl tbody tr:hover{background:rgba(var(--btx-slate-rgb),.16)}
.bx-row-sel,.bx-ptbl tbody tr.bx-row-sel:hover{background:rgba(var(--btx-acento-rgb),.22);box-shadow:inset 3px 0 0 var(--btx-acento)}
.bx-corswatch{display:inline-block;width:22px;height:22px;border-radius:5px;border:1px solid var(--btx-c300);align-self:center}
.bx-navmid{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;margin:0 6px;min-width:150px}
.bx-navdh{font-size:14px}.bx-navmid .am-pos{font-size:11px;color:var(--btx-c500)}
.bx-maps2{display:flex;gap:12px;flex-wrap:wrap}.bx-maps2 .bx-svg{width:280px}
.bx-maps3{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}.bx-maps3 .bx-svg{width:232px}
.bx-readwrap{display:flex;flex-direction:column;gap:12px}
.bx-mapobs{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}.bx-mapobs>.bx-maps3{flex:0 0 auto}
.bx-obscol{flex:1 1 260px;min-width:240px;display:flex;flex-direction:column;gap:8px}
.bx-obssec{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.bx-obslbl{font-size:11.5px;font-weight:600;color:var(--btx-c500);margin-bottom:3px}
.bx-obsta{flex:1;min-height:52px;width:100%;border:1px solid var(--btx-c300);border-radius:8px;padding:7px 9px;font-size:13px;line-height:1.4;box-sizing:border-box;resize:vertical;font-family:inherit;background:var(--btx-papel);color:var(--btx-tinta)}
.bx-obsbody{flex:1;overflow-y:auto;border:1px solid var(--btx-c200);border-radius:8px;padding:7px 9px;font-size:13px;line-height:1.45;min-height:40px;white-space:pre-wrap;background:rgba(var(--btx-slate-rgb),.08)}
.bx-vlabel{font-size:12px;font-weight:600;color:var(--btx-c600);margin-bottom:2px}
.bx-full{margin-left:auto;background:var(--btx-info);color:var(--btx-papel);border-color:var(--btx-info)}
.bx-lixon{background:var(--btx-acento);color:var(--btx-papel);border-color:var(--btx-acento);font-weight:700}
/* tela cheia */
.bx-fs{position:fixed;inset:0;z-index:9999;background:var(--btx-tinta);display:flex;flex-direction:column;color:var(--btx-c200)}
.bx-fs-top{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--btx-c800)}
.bx-fs-body{flex:1;display:flex;gap:16px;padding:14px;overflow:auto}
.bx-fs-map{flex:1 1 auto;display:flex;justify-content:center;align-items:flex-start;overflow:auto}
.bx-fs-map .bx-svg{height:88vh;width:auto;max-width:100%;background:var(--btx-papel);border-radius:8px}
.bx-fs-map .bx-maps2{align-items:flex-start}.bx-fs-map .bx-maps2 .bx-svg{height:80vh}
.bx-fs-map .bx-maps3{flex-wrap:nowrap;justify-content:center;align-items:flex-start;width:100%;gap:1vw}
/* larguras proporcionais ao ASPECTO de cada vista => ALTURAS IGUAIS. A frontal */
/* (576x976) é mais estreita que os perfis (641x970); com largura igual ela ficava */
/* mais alta. flex-grow ∝ aspecto (59/66/66) + basis 0 => cada cabeça do mesmo tamanho. */
.bx-fs-map .bx-maps3 .bx-map{min-width:0;flex:0 0 auto}
.bx-fs-map .bx-maps3 .bx-map:nth-child(1){flex:59 1 0}
.bx-fs-map .bx-maps3 .bx-map:nth-child(2){flex:66 1 0}
.bx-fs-map .bx-maps3 .bx-map:nth-child(3){flex:66 1 0}
.bx-fs-map .bx-maps3 .bx-svg{width:100%;height:auto;max-height:86vh}
.bx-fs-side{flex:0 0 320px;max-width:340px}.bx-fs-h{font-size:13px;color:var(--btx-c400);margin-bottom:6px}
.bx-fs-prods{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.bx-fsprod{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;border:1px solid var(--btx-c700);background:var(--btx-c800);color:var(--btx-c200);cursor:pointer;text-align:left}
.bx-fsprod.on{outline:2px solid var(--btx-foco);background:var(--btx-c700)}
.bx-fs .bx-hover{background:var(--btx-c700);color:var(--btx-c200);border-color:var(--btx-c600)}.bx-fs .bx-tab td,.bx-fs .bx-tab th{color:var(--btx-c300);border-color:var(--btx-c700)}
.bx-fs .bx-total,.bx-fs .bx-legenda{color:var(--btx-c200)}.bx-fsnav{display:flex;align-items:center;color:var(--btx-c200)}.bx-fsnav .am-b{background:var(--btx-c700);color:var(--btx-c200);border:1px solid var(--btx-c600)}
.bx-fs .bx-navdh{color:var(--btx-c200)}.bx-fs .bx-navmid .am-pos{color:var(--btx-c400)}.bx-fs .am-tbtn{background:var(--btx-c700);color:var(--btx-c200);border:1px solid var(--btx-c600)}.bx-fs .am-tbtn.on{background:var(--btx-foco);color:var(--btx-tinta)}
.bx-fs-titulo{font-size:15px;font-weight:600;flex:1}
.bx-fs-body-todos{flex-direction:column;overflow:auto;align-items:stretch}
.bx-hist{display:flex;flex-direction:column;gap:14px;width:100%}
.bx-hist-item{background:var(--btx-c800);border:1px solid var(--btx-c700);border-radius:10px;padding:12px}
.bx-hist-h{color:var(--btx-c200);margin-bottom:8px;font-size:14px}
.bx-hist-body{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.bx-hist-body .bx-svg{width:260px;background:var(--btx-papel)}.bx-hist-body .bx-maps2 .bx-svg{width:200px}
.bx-hist-side{flex:1 1 240px;min-width:220px}
/* modal de cores */
.bx-modal{position:fixed;inset:0;z-index:9999;background:rgba(var(--btx-tinta-rgb),.5);display:flex;align-items:center;justify-content:center}
.bx-modal-box{background:var(--btx-papel);border-radius:10px;padding:16px;min-width:340px;max-width:90vw;max-height:80vh;overflow:auto}
.bx-modal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.bx-corrow{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--btx-c100)}.bx-corrow input[type=color]{width:40px;height:30px;border:1px solid var(--btx-c300);border-radius:5px;padding:0}
/* diálogo de histórico: diagramas em cima, lista de pontos com scroll vertical embaixo */
.bx-histbox{width:min(1060px,95vw);max-height:92vh;overflow:hidden;display:flex;flex-direction:column;padding:12px 14px;color:var(--btx-tinta)}
.bx-histbox .bx-tab td,.bx-histbox .bx-tab th{color:var(--btx-tinta)}.bx-histbox .bx-tab .muted{color:var(--btx-c400)}
.bx-histbox .bx-modal-top{align-items:center;gap:10px}.bx-histbox .bx-fsnav{color:var(--btx-tinta)}.bx-histbox .bx-fsnav .am-b{background:var(--btx-c100);color:var(--btx-tinta);border:1px solid var(--btx-c300)}
.bx-histbox .bx-navmid{min-width:220px}.bx-histbox .bx-navdh,.bx-histbox .am-pos{color:var(--btx-c700)}.bx-histbox .am-tbtn{background:var(--btx-c100);color:var(--btx-tinta);border:1px solid var(--btx-c300)}
.bx-hist-info{flex:none;font-size:13px;color:var(--btx-c700);margin:2px 0 6px}
.bx-hist-maps{flex:none;display:flex;justify-content:center;margin:4px 0 8px}.bx-hist-maps .bx-maps3 .bx-svg{width:280px}
.bx-hist-pts{flex:none;height:26vh;overflow-y:auto;border-top:1px solid var(--btx-c200);padding-top:6px}
.bx-histop{display:inline-flex;align-items:center;gap:5px}
/* TELA CHEIA em PORTRAIT: empilha (mapa em cima, lista embaixo). Precisa estar AQUI, */
/* no fim da CSS do componente (injetada após o index.html): senão a regra base de */
/* desktop (.bx-fs-map{flex:1 1 auto}, de layout em linha) vence a cascata e, no */
/* column do portrait, COLAPSA o mapa a 0 — a lista subia sobre as imagens. */
@media (orientation:portrait){
.bx-fs-body{flex-direction:column}
.bx-fs-map{flex:0 0 auto;width:100%}
.bx-fs-side{flex:0 0 auto;max-width:none;width:100%}
.bx-fs-map .bx-svg{max-height:58vh}
.bx-fs-map .bx-maps2 .bx-svg{height:auto;width:auto;max-height:52vh}
}