/* Painel do monitor — só o que é específico daqui. Cores e medidas saem SEMPRE dos tokens da
   identidade (nordeste-tokens.css). Prefixo `mn-` para não colidir com o `nl-` do starter.

   Regra de cor deste painel (SIMILARIDADE): azul = dado; verde/âmbar/vermelho = ESTADO.
   Nenhum número fica colorido só por ser número — colorido quer dizer "fora do normal". */

.mn-largura-total { width: 100%; }
[hidden] { display: none !important; }

/* ─── Login ─── */
.mn-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.mn-login__caixa { width: 100%; max-width: 380px; }
.mn-login__topo { background: var(--color-escuro); padding: var(--sp-6) 20px var(--sp-4); text-align: center; }
.mn-login__logo { height: 40px; }
.mn-login__subtitulo { margin: var(--sp-2) 0 0; color: var(--color-sobre-escuro); font-weight: 600; }

.mn-troca__titulo { margin: 0 0 var(--sp-1); font-size: var(--fs-seccao); font-weight: 700; }
.mn-troca__texto { margin: 0 0 var(--sp-4); color: var(--color-texto-muted); line-height: var(--lh-base); }

/* ─── Cabeçalho e controles (PROXIMIDADE: um grupo por função) ─── */
.mn-header__direita { display: flex; align-items: center; gap: var(--sp-3); }
.mn-usuario { color: var(--color-texto-muted); font-size: var(--fs-pequeno); }
.mn-topo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.mn-controles { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.mn-grupo { display: flex; align-items: center; gap: var(--sp-2); }
.mn-grupo__rotulo { color: var(--color-texto-muted); font-size: var(--fs-pequeno); font-weight: 600; }

/* Selo com símbolo: a forma repete o que a cor diz (FECHAMENTO + regra 8 da identidade). */
.mn-selo { display: inline-flex; align-items: center; gap: 4px; }
.mn-selo__simbolo { font-weight: 800; }

/* ─── FIGURA E FUNDO: o que pede ação ─── */
.mn-acao { border-radius: var(--r-lg); margin-bottom: var(--sp-8); }
.mn-acao--pede { background: var(--color-escuro); color: #fff; padding: var(--sp-4) 20px; box-shadow: var(--sombra-modal); }
.mn-acao--ok {
  background: var(--color-sucesso-suave); border: 1px solid var(--color-sucesso);
  color: var(--color-sucesso); padding: var(--sp-3) var(--sp-4);
}
.mn-acao__titulo { margin: 0; font-size: var(--fs-seccao); font-weight: 700; display: flex; align-items: center; gap: var(--sp-2); }
.mn-acao--ok .mn-acao__titulo { font-size: var(--fs-base); }
.mn-acao__lista { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.mn-acao__item { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; gap: var(--sp-2); line-height: var(--lh-base); }
.mn-acao__area { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.mn-acao__item > span:last-child { color: var(--color-sobre-escuro); }

/* ─── REGIÃO COMUM: uma moldura por área ─── */
.mn-secoes { display: grid; gap: var(--sp-8); }          /* entre áreas: espaço GRANDE… */
.mn-secao { border-top: 4px solid var(--color-borda); scroll-margin-top: 76px; }
.mn-secao[data-nivel="ok"]        { border-top-color: var(--color-sucesso); }
.mn-secao[data-nivel="atencao"]   { border-top-color: var(--color-atencao); }
.mn-secao[data-nivel="erro"]      { border-top-color: var(--color-marca); }
.mn-secao[data-nivel="sem-dados"] { border-top-color: var(--color-info); }
.mn-secao__cabeca {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  padding: var(--sp-4) 20px; border-bottom: 1px solid var(--color-borda);
}
.mn-secao__titulo { margin: 0; font-size: 18px; font-weight: 700; }
.mn-secao__quando { margin-left: auto; color: var(--color-texto-muted); font-size: var(--fs-pequeno); }
.mn-secao__corpo { padding: var(--sp-4) 20px 20px; display: grid; gap: var(--sp-4); }  /* …dentro: espaço menor */

/* ─── KPIs (SIMILARIDADE: um componente só, mesmo tamanho em todas as áreas) ─── */
.mn-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.mn-kpi {
  background: var(--color-surface-alt); border: 1px solid var(--color-borda); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.mn-kpi__linha { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.mn-kpi__valor { font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; color: var(--color-texto); }
.mn-kpi__unidade { font-size: var(--fs-pequeno); font-weight: 600; color: var(--color-texto-muted); }
.mn-kpi__linha .mn-selo { margin-left: auto; align-self: center; }
.mn-kpi__rotulo { font-size: var(--fs-mini); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--color-texto-muted); }
.mn-kpi__nota { font-size: var(--fs-mini); color: var(--color-texto-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Só o KPI fora do normal ganha cor — e na borda E no número, não só num deles. */
.mn-kpi--atencao { border-color: var(--color-atencao); background: var(--color-atencao-suave); }
.mn-kpi--atencao .mn-kpi__valor { color: var(--color-atencao); }
.mn-kpi--erro { border-color: var(--color-marca); background: var(--color-marca-suave); }
.mn-kpi--erro .mn-kpi__valor { color: var(--color-marca); }

/* FECHAMENTO: trilho inteiro = o todo; preenchimento = o usado. */
.mn-barra { height: 6px; border-radius: 3px; background: var(--color-borda); overflow: hidden; margin-top: 6px; }
.mn-barra__cheio { height: 100%; border-radius: 3px; background: var(--color-info); }
.mn-kpi--atencao .mn-barra__cheio { background: var(--color-atencao); }
.mn-kpi--erro .mn-barra__cheio { background: var(--color-marca); }

/* ─── CONEXÃO UNIFORME: execuções ligadas por uma linha ─── */
.mn-faixa { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.mn-faixa__rotulo { font-size: var(--fs-mini); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--color-texto-muted); }
.mn-faixa__datas, .mn-faixa__vazio { font-size: var(--fs-pequeno); color: var(--color-texto-muted); }
.mn-faixa__svg { display: block; overflow: visible; }
.mn-faixa__linha { stroke: var(--color-borda-forte); stroke-width: 2; }
.mn-faixa__no circle { stroke-width: 2; }
.mn-faixa__no text { font-size: 11px; font-weight: 800; font-family: var(--fonte); }
.mn-faixa__no--sucesso circle { fill: var(--color-sucesso-suave); stroke: var(--color-sucesso); }
.mn-faixa__no--sucesso text   { fill: var(--color-sucesso); }
.mn-faixa__no--atencao circle { fill: var(--color-atencao-suave); stroke: var(--color-atencao); }
.mn-faixa__no--atencao text   { fill: var(--color-atencao); }
.mn-faixa__no--erro circle    { fill: var(--color-marca-suave); stroke: var(--color-marca); }
.mn-faixa__no--erro text      { fill: var(--color-marca); }

/* ─── Gráficos ─── */
.mn-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.mn-grafico { border: 1px solid var(--color-borda); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); min-width: 0; }
.mn-grafico__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.mn-grafico__titulo { margin: 0; font-size: var(--fs-base); font-weight: 700; }
/* Valor atual SEMPRE no mesmo canto (similaridade); durante o cursor mostra a data apontada. */
.mn-grafico__atual { font-size: 18px; font-weight: 800; color: var(--color-info); letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.mn-grafico__atual.is-cursor { color: var(--color-texto); font-size: var(--fs-base); font-weight: 700; }
.mn-grafico__svg { width: 100%; height: auto; display: block; border-radius: var(--r-sm); }
.mn-grafico__grade { stroke: var(--color-borda); stroke-width: 1; }
.mn-grafico__grade--vertical { stroke-dasharray: 2 4; }
.mn-grafico__eixo { fill: var(--color-texto-muted); font-size: 11px; font-family: var(--fonte); }
/* Série única = um hue só (azul de dado). O vermelho é do limite: "passou daqui, preocupe-se". */
.mn-grafico__linha { fill: none; stroke: var(--color-info); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mn-grafico__ponto { fill: var(--color-surface); stroke: var(--color-info); stroke-width: 2; }
.mn-grafico__limite { stroke: var(--color-marca); stroke-width: 1.5; stroke-dasharray: 5 4; }
.mn-grafico__limite-rotulo { fill: var(--color-marca); font-size: 11px; font-weight: 600; font-family: var(--fonte); }
/* Vão sem execução: silêncio é falha (régua da F0), então ele aparece — não some na linha. */
.mn-grafico__vao { fill: var(--color-marca-suave); }
.mn-grafico__vao-rotulo { fill: var(--color-marca); font-size: 10px; font-weight: 700; font-family: var(--fonte); }
/* DESTINO COMUM: cursor e marcador que andam juntos em todos os gráficos. */
.mn-grafico__area { fill: transparent; pointer-events: all; cursor: crosshair; }
.mn-grafico__cursor { stroke: var(--color-texto); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.mn-grafico__marcador { fill: var(--color-info); stroke: var(--color-surface); stroke-width: 2; pointer-events: none; }
.mn-grafico__tabela { margin-top: var(--sp-1); font-size: var(--fs-pequeno); }
.mn-grafico__tabela summary { cursor: pointer; color: var(--color-texto-muted); font-weight: 600; }
.mn-grafico__tabela table { width: 100%; border-collapse: collapse; margin-top: var(--sp-2); }
.mn-grafico__tabela th, .mn-grafico__tabela td { text-align: left; padding: 4px var(--sp-2); border-top: 1px solid var(--color-borda); }
.mn-grafico__tabela th { color: var(--color-texto-muted); font-size: var(--fs-mini); text-transform: uppercase; }

.nl-nota { margin-top: var(--sp-4); }

@media (max-width: 960px) {
  .mn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-graficos { grid-template-columns: minmax(0, 1fr); }
  .mn-controles { margin-left: 0; }
}
@media (max-width: 640px) {
  .mn-controles { gap: var(--sp-3); }
  .mn-secao__quando { margin-left: 0; width: 100%; }
  .mn-acao__item { grid-template-columns: auto minmax(0, 1fr); }
  .mn-acao__item > span:last-child { grid-column: 1 / -1; }
}