main.nsi-conteudo{padding-bottom:1.5rem}
button.reset{background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;padding:0}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:.82rem;overflow-wrap:anywhere}
.console>*{min-width:0}
.num{font-variant-numeric:tabular-nums}
.t-suave{color:var(--nsi-texto-suave)}
.oculto{display:none!important}

/* faixa de situação */
.situacao{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:16px 20px;border-radius:12px;border:1px solid var(--nsi-borda);background:var(--nsi-superficie);margin-bottom:16px}
.situacao.ruim{background:var(--nsi-erro-fundo);border-color:var(--nsi-erro)}
.situacao h2{margin:0;font-size:1.25rem}
.situacao .contagens{display:flex;gap:20px;flex-wrap:wrap}
.situacao .contagens b{font-size:1.5rem;display:block;line-height:1.1}
.situacao .contagens span{font-size:.85rem}
.ao-vivo{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--nsi-texto-suave)}
.ponto{width:10px;height:10px;border-radius:50%;background:var(--nsi-sucesso);display:inline-block}

/* estados */
.est{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.85rem;padding:4px 10px;border-radius:8px;width:fit-content;white-space:nowrap}
.est-falha{background:var(--nsi-erro);color:var(--nsi-branco)}
.est-atencao{background:var(--nsi-alerta-fundo);color:var(--nsi-alerta-texto);border:1px solid var(--nsi-alerta-texto)}
.est-ok{background:var(--nsi-sucesso-fundo);color:var(--nsi-sucesso)}

/* D: linhas de aplicação */
.linhas{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.linha-app{display:grid;grid-template-columns:8rem minmax(10rem,14rem) minmax(0,1fr) 10rem 8rem 8rem;gap:16px;align-items:center;width:100%;padding:14px 16px;background:var(--nsi-superficie);border:1px solid var(--nsi-borda);border-radius:12px;min-height:4.5rem}
.linha-app:hover{border-color:var(--nsi-azul)}
.linha-app.falha{border-color:var(--nsi-erro)}
.linha-app strong{display:block}
.linha-app small{color:var(--nsi-texto-suave);display:block}
.erro-top b{display:block;overflow-wrap:anywhere}
.metrica b{font-size:1.15rem;display:block}
.metrica small{font-size:.78rem}
@media (max-width:1180px){.linha-app{grid-template-columns:8rem minmax(0,1fr) 9rem;grid-template-areas:"est app spark" "erro erro erro" "m1 m2 m3"}
  .linha-app>:nth-child(1){grid-area:est}.linha-app>:nth-child(2){grid-area:app}.linha-app>:nth-child(3){grid-area:erro}.linha-app>:nth-child(4){grid-area:spark}.linha-app>:nth-child(5){grid-area:m1}.linha-app>:nth-child(6){grid-area:m2}}
@media (max-width:640px){.linha-app{grid-template-columns:minmax(0,1fr) 6rem;grid-template-areas:"est spark" "app app" "erro erro" "m1 m2"}}
.estaveis{padding:14px 16px;border:1px dashed var(--nsi-borda-forte);border-radius:12px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.spark{display:flex;align-items:flex-end;gap:2px;height:40px}
.spark i{flex:1;background:var(--nsi-azul);min-height:2px;border-radius:2px 2px 0 0}
.spark.vm i{background:var(--nsi-erro)}
.spark.am i{background:var(--nsi-alerta-texto)}
.grande .spark{height:120px;gap:4px}
.eixo{display:flex;justify-content:space-between;font-size:.75rem;color:var(--nsi-texto-suave);margin-top:4px}

/* E: mapa de calor */
.calor-caixa{overflow-x:auto}
.calor{display:grid;grid-template-columns:14rem minmax(0,1fr);min-width:46rem}
.calor-cab,.calor-lin{display:contents}
.calor .rot{padding:10px 12px;border-bottom:1px solid var(--nsi-borda);display:grid;gap:2px;align-content:center;min-height:4.25rem}
.calor .cel{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;padding:8px 4px;border-bottom:1px solid var(--nsi-borda);align-items:stretch}
.calor .cel span{border-radius:3px;min-height:2.6rem;display:grid;place-items:center;font-size:.68rem;font-weight:600;color:var(--nsi-texto)}
.n0{background:var(--nsi-superficie-2)}.n1{background:#fdd9a8}.n2{background:#f7a55a}.n3{background:#e5614c;color:var(--nsi-branco)!important}.n4{background:#a93226;color:var(--nsi-branco)!important}
.calor .cab-h{padding:8px 4px;display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;font-size:.68rem;color:var(--nsi-texto-suave);text-align:center;border-bottom:1px solid var(--nsi-borda-forte)}
.calor-lin:hover .rot,.calor-lin:hover .cel{background:var(--nsi-azul-suave)}
.legenda{display:flex;gap:8px;align-items:center;font-size:.8rem;color:var(--nsi-texto-suave);padding:10px 12px;flex-wrap:wrap}
.legenda span.q{width:22px;height:14px;border-radius:3px;display:inline-block}

/* F: console */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));gap:8px;margin-bottom:16px}
.tile{display:grid;gap:4px;padding:12px;border-radius:12px;border:2px solid var(--nsi-borda);background:var(--nsi-superficie);min-height:6rem;align-content:start}
.tile[aria-pressed=true]{outline:3px solid var(--nsi-laranja);outline-offset:2px}
.tile.falha{border-color:var(--nsi-erro);background:var(--nsi-erro-fundo)}
.tile.atencao{border-color:var(--nsi-alerta-texto);background:var(--nsi-alerta-fundo)}
.tile b{font-size:1.5rem;line-height:1}
.console{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){.console{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.fluxo{list-style:none;margin:0;padding:0}
.fluxo li button{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;gap:4px 12px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--nsi-borda);font:inherit;color:inherit;padding:10px 16px;min-height:3.75rem;cursor:pointer;align-items:center}
.fluxo li button:hover{background:var(--nsi-superficie-2)}
.fluxo li button[aria-current=true]{background:var(--nsi-azul-suave)}
.fluxo .hora{font-size:.8rem;color:var(--nsi-texto-suave)}
.fluxo .q{font-weight:700;font-size:1.05rem;text-align:right}
.fluxo .t{font-weight:600;overflow-wrap:anywhere;display:block}

/* detalhe (tamanho do problema) */
.det{padding:16px;display:grid;gap:16px}
.det>*{min-width:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(8.5rem,100%),1fr));gap:12px}
.kpis div{border:1px solid var(--nsi-borda);border-radius:10px;padding:10px 12px}
.kpis b{font-size:1.5rem;display:block;line-height:1.15}
.kpis small{color:var(--nsi-texto-suave)}
.bar{display:grid;grid-template-columns:7rem minmax(0,1fr) 3.5rem;gap:8px;align-items:center;font-size:.85rem;margin:4px 0}
.bar i{display:block;height:10px;border-radius:5px;background:var(--nsi-azul)}
.bar .tr{background:var(--nsi-borda);border-radius:5px;overflow:hidden}
pre.stack{margin:0;background:var(--nsi-superficie-2);border:1px solid var(--nsi-borda);border-radius:8px;padding:12px;overflow:auto;font-size:.8rem;line-height:1.5}
.prob{border:1px solid var(--nsi-borda);border-radius:10px;padding:12px;display:grid;gap:8px}
.acoes{display:flex;flex-wrap:wrap;gap:8px}

/* Rodada 3: pulso, linha de aplicação, régua de impacto, linha do incidente */
.sala{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.sala>*{min-width:0}
.so-desktop{display:none}
@media (min-width:1100px){.sala{grid-template-columns:minmax(0,1fr) minmax(0,25rem);align-items:start}.so-desktop{display:block}.lateral{position:sticky;top:16px}}
.app-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.app-row{display:grid;grid-template-columns:7.5rem minmax(0,1fr) 10rem 6.5rem;gap:4px 16px;align-items:center;width:100%;padding:12px 14px;background:var(--nsi-superficie);border:2px solid var(--nsi-borda);border-radius:12px;min-height:4.5rem}
.app-row:hover{border-color:var(--nsi-azul)}
.app-row.falha{border-color:var(--nsi-erro);background:var(--nsi-erro-fundo)}
.app-row.atencao{border-color:var(--nsi-alerta-texto);background:var(--nsi-alerta-fundo)}
.app-row[aria-current=true]{outline:3px solid var(--nsi-laranja);outline-offset:2px}
.app-row .nome{display:block;font-weight:700}
.app-row .erro{display:block;overflow-wrap:anywhere;font-size:.92rem}
.app-row .taxa b{font-size:1.25rem;display:block;text-align:right;line-height:1.1}
.app-row .taxa small{display:block;text-align:right;font-size:.75rem}
.pulso{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:1px;height:32px;align-items:end}
.pulso i{display:block;border-radius:2px 2px 0 0;min-height:4px}
.pulso-leg{display:flex;justify-content:space-between;font-size:.7rem;color:var(--nsi-texto-suave);margin-top:2px}
@media (max-width:760px){.app-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"est taxa" "nome nome" "pulso pulso"}
  .app-row>:nth-child(1){grid-area:est}.app-row>:nth-child(2){grid-area:nome}.app-row>:nth-child(3){grid-area:pulso}.app-row>:nth-child(4){grid-area:taxa}}
.estaveis summary{cursor:pointer;min-height:48px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600}
.regua{display:grid;gap:14px}
.regua b.v{font-size:1.5rem;line-height:1.1}
.regua .linha{height:12px;border-radius:6px;background:var(--nsi-borda);position:relative;overflow:hidden;margin-top:6px}
.regua .linha i{position:absolute;left:0;top:0;bottom:0;background:var(--nsi-erro);border-radius:6px}
.regua .linha .normal{position:absolute;top:0;bottom:0;width:3px;background:var(--nsi-azul-800)}
.regua small{color:var(--nsi-texto-suave)}
.incid{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--nsi-borda-forte);display:grid;gap:10px}
.incid li{position:relative}
.incid li::before{content:"";position:absolute;left:-20px;top:.35rem;width:10px;height:10px;border-radius:50%;background:var(--nsi-azul)}
.incid li.agora::before{background:var(--nsi-erro)}
.incid b{font-variant-numeric:tabular-nums}

/* Ajuste de respiro e alinhamento (validação da tela) */
.lateral .nsi-painel-cab{padding:16px 16px 0;margin:0}
.lateral .nsi-painel-cab h2{margin:0}
.det{padding:16px;gap:20px}
.det strong{display:block;margin-bottom:8px}
.det .prob strong{display:inline;margin:0}
.det>div>div[style*="margin-top:8px"]{margin-top:0!important}
.det .prob{margin-top:0!important}
.det .prob+.prob{margin-top:8px!important}
.prob{padding:14px;gap:6px}
.prob .acoes{margin-top:6px}
.regua{gap:18px}
.regua .item>span{display:block;margin-bottom:2px}
.regua .linha{margin-top:8px}
.regua small{display:block;margin-top:6px}
.pulso-leg{margin-top:6px}
button.app-row{padding:14px 16px;gap:6px 16px}
.app-row .nome{margin-bottom:2px}
.app-row .est{align-self:center}
.app-row .taxa{align-self:center}
.app-lista{gap:10px}
.sala{gap:20px}
.situacao{margin-bottom:20px}
.estaveis summary{padding:4px 0}
.incid{gap:12px;margin-left:5px}
.bar{margin:6px 0}
@media (max-width:760px){.app-row{gap:8px 12px}.det{padding:16px 16px 24px}button.app-row[aria-current=true]{outline-offset:-3px}.proto-barra{display:none}.nsi-cabecalho h1{font-size:1.5rem}}

/* Detalhe sem rolar a página: painel com rolagem própria, essencial numa tela */
.regua{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.regua .item{border:1px solid var(--nsi-borda);border-radius:10px;padding:10px 12px;display:grid;gap:4px;align-content:start;min-width:0}
.regua .item .rot{font-size:.8rem;color:var(--nsi-texto-suave);margin:0}
.regua b.v{font-size:1.6rem}
.regua .linha{margin-top:2px;height:10px}
.regua small{font-size:.78rem;margin-top:2px}
.det{gap:16px}
.det .pulso[style]{height:64px!important}
.duas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.duas>div{min-width:0}
.prob-rodape{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.prob .acoes{margin:0}
.prob .nsi-btn{min-height:44px}
@media (min-width:1100px){
  .sala{grid-template-columns:minmax(0,1fr) minmax(0,31rem)}
  .lateral{max-height:calc(100vh - 32px);overflow:auto;overscroll-behavior:contain}
  .lateral .nsi-painel-cab{position:sticky;top:0;background:var(--nsi-superficie);z-index:1;padding-bottom:12px;border-bottom:1px solid var(--nsi-borda)}
  button.app-row{grid-template-columns:7rem minmax(0,1fr) 9rem 6rem}
}
@media (max-width:760px){.regua{grid-template-columns:minmax(0,1fr)}.regua .item{grid-template-columns:1fr auto;align-items:center}.regua .item .linha,.regua .item small{grid-column:1/-1}.duas{grid-template-columns:minmax(0,1fr)}}

/* Sala sem rolagem da página: lista e detalhe rolam cada um no seu quadro */
.situacao{padding:10px 16px;margin-bottom:16px;gap:8px 20px}
.situacao h2{font-size:1.1rem}
.situacao .contagens{gap:16px}
.situacao .contagens b{display:inline;font-size:1.25rem;margin-right:6px}
.situacao .contagens div{display:flex;align-items:baseline}
@media (min-width:1100px) and (min-height:640px){
  .sala{align-items:stretch;overflow:hidden}
  .sala>div:first-child{overflow:auto;padding:8px;margin:-8px;min-height:0}
  .lateral{position:static;max-height:none;height:100%;overflow:auto}
  .sala{grid-template-columns:minmax(0,1fr) minmax(0,28rem)}
  .sala>.lateral{min-height:0}
}
.lateral .nsi-painel-cab{padding:12px 16px}
.lateral .nsi-painel-cab h2{font-size:1.1rem}

.duas .bar{grid-template-columns:5.2rem minmax(0,1fr) 2.4rem;font-size:.8rem}
.duas .bar .tr{min-width:3rem}
button.app-row[aria-current=true]{outline-offset:-3px}
.sala>div:first-child{padding:0!important;margin:0!important}

/* Tendência na taxa por hora */
.tend-sobe{color:var(--nsi-erro-escuro)}
.tend-cai{color:var(--nsi-sucesso)}
.tend-igual{color:var(--nsi-texto-suave)}

/* Ativar notificações no menu do usuário */
.notificacoes{padding:4px 0}
.notificacoes p{display:flex;gap:8px;align-items:flex-start;margin:0;padding:8px 12px;font-size:.85rem;color:var(--nsi-texto-suave)}
.notificacoes p[role=alert]{color:var(--nsi-erro)}
.notificacoes p[role=status]{color:var(--nsi-sucesso)}
.notificacoes button{display:flex;gap:8px;align-items:center;width:100%;min-height:44px;padding:0 12px;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.notificacoes button:hover{background:var(--nsi-superficie-2)}
.notificacoes button:disabled{opacity:.6;cursor:progress}

/* Aplicações: chave de API e lista de chaves */
.chave-api{display:block;padding:12px 14px;border-radius:8px;background:var(--nsi-superficie-2);border:1px solid var(--nsi-borda);font-family:ui-monospace,Consolas,monospace;font-size:.95rem;overflow-wrap:anywhere;user-select:all}
.lista-chaves{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lista-chaves li{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--nsi-borda);border-radius:10px}
.lista-chaves small{display:block;color:var(--nsi-texto-suave)}

/* Resolvidos e ignorados: seção recolhida no detalhe (AD-017) */
.encerrados{border:1px dashed var(--nsi-borda-forte);border-radius:10px;padding:0 12px 12px}
.encerrados summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.encerrados .prob+.prob{margin-top:8px}

/* Hierarquia do detalhe e diagnóstico da última ocorrência. */
.det h3{font-size:1.05rem;font-weight:600;line-height:1.4;margin:0 0 .7rem}
.lateral .nsi-painel-cab h2,#gaveta-titulo{font-size:1.4rem;line-height:1.3;overflow-wrap:anywhere}
.det .regua .item{border:0;border-radius:0;padding:.25rem 0}
.det .regua{padding-bottom:1rem;border-bottom:1px solid var(--nsi-borda)}
.det .regua b.v{font-weight:600}
.det .prob{gap:.65rem;padding:1rem;overflow:hidden;min-width:0}
.erro-tipo{color:var(--nsi-azul);font-weight:600;overflow-wrap:anywhere}
.erro-mensagem{margin:0;font-size:1.12rem;font-weight:500;line-height:1.5;overflow-wrap:anywhere}
.erro-local{font: .87rem/1.6 ui-monospace,Consolas,monospace;color:var(--nsi-texto-suave);overflow-wrap:anywhere}
.erro-meta{color:var(--nsi-texto-suave);font-size:.87rem;overflow-wrap:anywhere}
.det .prob .nsi-btn{min-height:var(--nsi-alvo)}
.erro-dialogo{width:min(76rem,calc(100vw - 3rem));max-width:none;max-height:calc(100dvh - 3rem);padding:0}
.erro-dialogo[open]{display:flex;flex-direction:column}
.erro-dialogo .nsi-dialogo-cab{align-items:flex-start;gap:1rem}
.erro-dialogo .nsi-dialogo-cab>div{min-width:0;flex:1}
.erro-dialogo h2{font-size:1.35rem;margin:0}
.erro-dialogo h3{font-size:1.05rem;margin:0;font-weight:600}
.erro-dialogo .nsi-dialogo-cab p{margin:.4rem 0 0;overflow-wrap:anywhere}
.erro-dialogo .nsi-dialogo-corpo{overflow:auto;min-height:0;padding:1.3rem}
.erro-conteudo{display:grid;gap:1rem;min-width:0}
.erro-conteudo>*{min-width:0}
.erro-ocorrencia{padding:.8rem 1rem;border:1px solid var(--nsi-borda);border-radius:.5rem;background:var(--nsi-superficie-2)}
.erro-ocorrencia p{margin:.35rem 0 0}
.erro-contexto-extra summary{cursor:pointer;color:var(--nsi-azul);font-weight:500;min-height:var(--nsi-alvo);align-content:center}
.erro-contexto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:.8rem 1.2rem;margin:.5rem 0 0}
.erro-contexto dt{font-size:.85rem;color:var(--nsi-texto-suave)}
.erro-contexto dd{margin:.25rem 0 0;font-weight:500;overflow-wrap:anywhere}
.erro-console{background:var(--nsi-menu-fundo);color:var(--nsi-branco);border-radius:.6rem;overflow:hidden;min-width:0}
.erro-ferramentas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.65rem 1rem;padding:.65rem 1rem;border-bottom:1px solid var(--nsi-menu-linha)}
.erro-ferramentas label{display:flex;align-items:center;gap:.6rem;min-height:var(--nsi-alvo);cursor:pointer;font-size:.9rem}
.erro-ferramentas .nsi-btn{background:var(--nsi-menu-fundo);color:var(--nsi-branco);border-color:var(--nsi-menu-texto)}
.erro-ferramentas .nsi-btn:hover,.erro-ferramentas .nsi-btn:focus-visible{background:var(--nsi-marca-fundo);color:var(--nsi-branco);border-color:var(--nsi-branco)}
.erro-console pre{margin:0;padding:1.1rem;overflow:auto;max-height:32rem;max-height:min(32rem,55dvh);font:.9rem/1.7 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4}
.erro-console code{font:inherit;color:inherit}
.erro-console pre.sem-quebra{white-space:pre;overflow-wrap:normal}
.erro-estado{padding:1.4rem;background:var(--nsi-superficie-2);border:1px solid var(--nsi-borda);border-radius:.5rem;min-height:5rem}
.erro-estado[data-erro-carregando]{border:0;background:none}
.erro-estado .nsi-esqueleto{min-height:4rem}
@media (min-width:64rem){
  .erro-contexto-extra>summary{display:none}
  .erro-contexto-extra::details-content{content-visibility:visible}
}
@media (max-width:63.99rem){
  .erro-dialogo{margin:auto;width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem);border-radius:.6rem}
  .erro-dialogo .nsi-dialogo-corpo{padding:1rem}
}
