/* cockgit — nova-mapa.css
   vista /nova · tela MAPA DOS SISTEMAS (07/10/2026). O porquê está em
   js/app-nova-mapa.js e js/app-nova-mapa-codigo.js. Cores só pelos tokens das peças
   (nova-pecas.css): claro e escuro seguem o dispositivo. SEM ROLAGEM: a altura da tela
   é medida no JS e nada aqui usa overflow que role — o que não cabe vira "mais N ›".
   Nada pisca; a única transição é a cor do foco (0,15 s), e só sem prefers-reduced-motion. */
#nv:not([data-tela="mapa"]) #nv-mapa{display:none}
#nv-mapa{max-width:1440px;margin:0 auto;padding:10px 16px 0;min-width:0}
#nv-mp{--t-cap:11px;--t-dat:13px;--t-bod:15px;--t-sec:21px;--t-dis:28px;
  display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;font:13px/1.45 var(--mono);color:var(--ink)}
.mp-top{display:flex;justify-content:space-between;align-items:flex-end;gap:6px 12px;flex-wrap:wrap;
  border-bottom:1px solid var(--rule);padding-bottom:6px;margin-bottom:8px;min-width:0}
.mp-h{font:600 21px/1.15 var(--display);margin:0;color:var(--ink)}
.mp-h3{font:700 15px/1.2 var(--display);margin:0;color:var(--ink);overflow-wrap:anywhere}
.mp-lead{color:var(--mut);margin:2px 0 0;font-size:11px;overflow-wrap:anywhere}
/* o corpo NUNCA vaza para a página: o que não cabe já virou página com "mais N" (_mpCabe) */
.mp-corpo{min-height:0;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.mp-corpo>.mp-palco,.mp-corpo>.mp-zoom{flex:1 1 0}
.mp-small{font-size:11px;color:var(--mut);overflow-wrap:anywhere}
.mp-small b{color:var(--ink);font-weight:600}
.mp-cap{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.mp-seg{display:flex;align-items:center}
.mp-seg .mp-small{margin-right:6px}
#nv .mp-seg button{border:1px solid var(--bd);background:var(--sf);color:var(--mut);padding:5px 10px;
  font:13px var(--mono);cursor:pointer;min-height:36px;border-radius:0}
#nv .mp-seg button+button{border-left:0}
#nv .mp-seg button[aria-pressed="true"]{color:var(--ink);border-color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue)}
.mp-chip{display:inline-block;padding:1px 7px;font-size:11px;margin:4px 4px 0 0;border:1px solid var(--bd);color:var(--mut)}
.mp-chip.g{border-color:var(--green);color:var(--green)}
.mp-chip.o{border-color:var(--orange);color:var(--orange)}
.mp-card{display:block;background:var(--sf);border:1px solid var(--bd);padding:8px 12px;min-width:0;text-align:left;
  font:inherit;color:var(--ink);border-radius:0}
.mp-card h3{font:600 15px/1.3 var(--mono);margin:2px 0 4px;overflow-wrap:anywhere}
.mp-card.hot{box-shadow:inset 3px 0 0 var(--orange)}
.mp-card>.mp-small+.mp-small{margin-top:3px}
.mp-l1{display:flex;justify-content:space-between;align-items:baseline;gap:2px 8px;flex-wrap:wrap;min-width:0}
.mp-lst{list-style:none;margin:6px 0 0;padding:0;font-size:13px}
.mp-lst li{padding:3px 0;border-top:1px solid var(--bd);display:flex;justify-content:space-between;gap:2px 8px;flex-wrap:wrap;overflow-wrap:anywhere}

.mp-lst li>span:last-child:not(:only-child){color:var(--mut);text-align:right}
.mp-lst.mp-ach li,.mp-lst.mp-mods li,.mp-lst.mp-pastas li{display:block}
#nv .mp-btn{display:block;width:100%;font:600 13px var(--mono);padding:8px 10px;border:1px solid var(--blue);background:transparent;
  color:var(--blue);cursor:pointer;min-height:44px;margin-top:8px;border-radius:0}
#nv .mp-voltar,#nv .mp-mais button{border:1px solid var(--bd);background:var(--sf);color:var(--ink);padding:5px 10px;
  font:13px var(--mono);cursor:pointer;min-height:36px;border-radius:0}
.mp-mais{display:flex;justify-content:space-between;gap:6px;margin-top:6px}
#nv .mp-mais button:last-child{margin-left:auto;color:var(--blue);border-color:var(--blue)}
#nv button.mp-card{width:100%;cursor:pointer;height:auto;white-space:normal}
/* página de lista: o item fora da página some de verdade (vence o display das listas) */
#nv-mp [hidden]{display:none!important}
/* os botões do mapa são botões limpos: sem o colchete que a casca põe nos botões do #nv */
#nv :is(.mp-seg button,.mp-voltar,.mp-mais button,.mp-btn,button.mp-card,.mp-fb)::before,
#nv :is(.mp-seg button,.mp-voltar,.mp-mais button,.mp-btn,button.mp-card,.mp-fb)::after{content:none}
#nv button.mp-card:hover{border-color:var(--blue)}
:is(#nv button,#nv .mp-no,#nv .mp-as):focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* o PALCO: o desenho e a coluna das fichas */
.mp-palco{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;min-height:0}
.mp-quadro{border:1px solid var(--rule);background:var(--sf2);min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);padding:0;min-width:0}
.mp-zoom .mp-quadro{padding:6px 10px}
.mp-zoom .mp-quadro{grid-template-rows:auto minmax(0,1fr)}
.mp-leg{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:11px;color:var(--mut);margin:4px 0}
.mp-leg i{display:inline-block;width:16px;height:0;border-top:2px solid;vertical-align:3px;margin-right:4px}
.mp-leg b{display:inline-block;width:10px;height:10px;margin-right:4px;vertical-align:-1px}
.mp-area{min-height:0;position:relative}
/* [07/10] o desenho é uma JANELA: o gesto (arrastar, pinça, roda) fica dentro do quadro e
   a página nunca rola nem dá zoom por baixo (app-nova-mapa-palco.js) */
.mp-palco .mp-svg{position:absolute;inset:0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.mp-svg{display:block;width:100%;height:100%}
.mp-svg.mp-arrasta,.mp-svg.mp-arrasta .mp-no{cursor:grabbing}
.mp-svg:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
/* a barra do quadro: o filtro (ou a dica) à esquerda, o zoom à direita */
.mp-ferr{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;padding:4px 6px;border-bottom:1px solid var(--bd);background:var(--sf);min-width:0}
.mp-ff{font-size:11px;color:var(--mut);overflow-wrap:anywhere;min-width:0}
.mp-ff b{color:var(--ink);font-weight:600}
.mp-fz{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto}
#nv .mp-fb{border:1px solid var(--bd);background:var(--sf);color:var(--ink);padding:4px 10px;font:13px var(--mono);
  cursor:pointer;min-height:36px;min-width:36px;border-radius:0}
#nv .mp-fb:hover{border-color:var(--blue)}
#nv .mp-fb[aria-pressed="true"]{border-color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue)}
#nv .mp-fb[hidden]{display:none}
#nv .mp-zv{min-width:58px;color:var(--mut)}
.mp-donos{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
#nv .mp-verdes{margin-left:auto;color:var(--blue);border-color:var(--blue)}
/* a saúde em palavras (fichas): a cor do estado, como na aba No ar */
.mp-est{font-size:13px;font-weight:600}
.mp-est[data-t="ok"]{color:var(--green)}
.mp-est[data-t="warn"]{color:var(--orange)}
.mp-est[data-t="bad"]{color:var(--red)}
.mp-est[data-t="run"]{color:var(--blue)}
.mp-est[data-t="idle"]{color:var(--idle)}
.mp-est .mp-small{font-weight:400}
.mp-vb[data-t="ok"] i{background:var(--idle)}
.mp-vb[data-t="warn"] i{background:var(--orange)}
.mp-vb[data-t="bad"] i{background:var(--red)}
.mp-lado{min-height:0;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.mp-lado>.mp-card{flex:0 0 auto}

/* os nós e as ligações */
.mp-no rect.cx{fill:var(--sf);stroke:var(--bd)}
.mp-no text{fill:var(--ink);font:13px var(--mono)}
.mp-no text.s{fill:var(--mut);font-size:13px}
/* [07/10] a SAÚDE na caixa do sistema: o fundo no tom do estado e a palavra na cor dele */
.mp-no.svc[data-saude="ok"] rect.cx{fill:color-mix(in oklab,var(--green) 9%,var(--sf));stroke:var(--green)}
.mp-no.svc[data-saude="warn"] rect.cx{fill:color-mix(in oklab,var(--orange) 11%,var(--sf));stroke:var(--orange)}
.mp-no.svc[data-saude="bad"] rect.cx{fill:color-mix(in oklab,var(--red) 11%,var(--sf));stroke:var(--red)}
.mp-no.svc[data-saude="run"] rect.cx{fill:color-mix(in oklab,var(--blue) 11%,var(--sf));stroke:var(--blue)}
.mp-no text.st,.mp-no text.ven{font-weight:600}
.mp-no text[data-t="ok"].st{fill:var(--green)}
.mp-no text[data-t="ok"].ven{fill:var(--mut);font-weight:400}
.mp-no text[data-t="warn"]{fill:var(--orange)}
.mp-no text[data-t="bad"]{fill:var(--red)}
.mp-no text[data-t="run"]{fill:var(--blue)}
.mp-no text[data-t="idle"]{fill:var(--idle)}
.mp-no rect.vb{fill:var(--bd)}
.mp-no rect.vf{fill:var(--idle)}
.mp-no rect.vf[data-t="warn"]{fill:var(--orange)}
.mp-no rect.vf[data-t="bad"]{fill:var(--red)}
.mp-no{cursor:pointer;outline:none}
.mp-no:hover rect.cx,.mp-no.sel rect.cx,.mp-no:focus-visible rect.cx{stroke:var(--blue);stroke-width:1.5}
.mp-no.grupo rect.cx{fill:var(--sf2);stroke:var(--rule)}
.mp-no.grupo text{font:600 15px var(--display);letter-spacing:.03em}
.mp-banda{fill:none;stroke:var(--bd)}
.mp-lg{fill:none;stroke-width:1.2}
.mp-lg.ede{stroke:var(--rule)}
.mp-lg.pub{stroke:var(--blue)}
.mp-lg.ser{stroke:var(--green)}
.mp-lg.ban{stroke:var(--amber)}
.mp-lg.le{stroke:var(--amber);stroke-dasharray:2 3}
.mp-lg.fala{stroke:var(--orange);stroke-dasharray:5 3}
.mp-lg.atende{stroke:var(--green);stroke-dasharray:1 3;stroke-width:1.8;stroke-linecap:round}
.mp-lg.dito{stroke-dasharray:4 3}
/* o FOCO recua o resto por COR, nunca por opacity (DESIGN §2): caixa no tom da
   célula, texto na cor de "parado" (AA), ligação na cor da borda */
.mp-svg.foco .mp-no:not(.viz) rect.cx,.mp-svg.foco .mp-no.svc:not(.viz)[data-saude] rect.cx{fill:var(--sf2);stroke:var(--bd)}
.mp-svg.foco .mp-no:not(.viz) text,.mp-svg.foco .mp-no:not(.viz) text[data-t]{fill:var(--idle)}
.mp-svg.foco .mp-no:not(.viz) rect.tp,.mp-svg.foco .mp-no:not(.viz) rect.vf{fill:var(--bd)!important}
.mp-svg.foco .mp-lg:not(.viz){stroke:var(--bd)}
.mp-svg.foco .mp-lg.viz{stroke-width:2.2}

/* o ZOOM no código */
.mp-zcab{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;min-width:0}
.mp-zoom{display:grid;grid-template-columns:250px minmax(0,1fr) 320px;gap:12px;min-height:0}
.mp-col{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.mp-col>.mp-card,.mp-fill{flex:1 1 auto;min-height:0}
.mp-pastas li .mp-small{line-height:1.35}
.mp-barra{display:block;height:5px;background:var(--bd);margin-top:3px}
.mp-barra i{display:block;height:100%;background:var(--blue)}
.mp-as rect{fill:var(--sf);stroke:var(--bd)}
.mp-as.sel rect:first-child,.mp-as:hover rect:first-child,.mp-as:focus-visible rect:first-child{stroke:var(--blue);stroke-width:1.6}
.mp-as text{fill:var(--ink);font:600 13px var(--display)}
.mp-as text.s{fill:var(--mut);font:11px var(--mono)}
.mp-as{cursor:pointer;outline:none}
.mp-la{stroke:var(--rule);fill:none}
.mp-la.viz{stroke:var(--blue)}

/* celular: lista agrupada, um item aberto por vez */
.mp-lista{display:grid;gap:8px;align-content:start;min-height:0}
.mp-lista>[hidden]{display:none}
.mp-lista .mp-card h3{font-size:15px;margin:0 0 2px}
.mp-lista2{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;margin-top:6px}
.mp-lista2>[hidden]{display:none}
.mp-as-n{font:600 13px var(--display)}
.mp-svc{font-size:11px;color:var(--mut);line-height:1.4;overflow-wrap:anywhere}
#nv .mp-linha{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;font-size:13px}
/* celular com o desenho aberto: o quadro inteiro e a ficha como folha embaixo */
.mp-palco.cel{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
.mp-palco.cel .mp-lado[hidden]{display:none}
@media (max-width:1023px){
  #nv-mapa{padding:8px 12px 0}
  .mp-h{font-size:15px}
  #nv .mp-fb{min-height:44px;min-width:44px}
  /* no celular os botões quebram um a um (não o grupo inteiro de uma vez) */
  .mp-fz{display:contents}
}
@media (prefers-reduced-motion:no-preference){
  .mp-no rect,.mp-no text,.mp-lg{transition:fill .15s,stroke .15s}
}
/* [09/10] a barra fina diz o seu dado (app-nova-dica.js): o alvo cresce, o desenho não */
.mp-barra[data-dica]{position:relative}
.mp-barra[data-dica]::after{content:"";position:absolute;inset:-7px 0}