/* ──────────────────────────────────────────────────────────────────────────
   css/38-graficos.css — Kit de Padroes, Nivel 4 §3 (Graficos)

   A aba Analises do Master tinha 12 canvas. Quatro deles respondiam a MESMA
   pergunta ("por unidade") e viraram uma tabela; quatro donuts viraram barras
   empilhadas de uma linha. Aqui mora o visual dos dois substitutos.

   "Grafico nao e o terceiro nivel de superficie: ele mora dentro do cartao, sem
   caixa propria em volta" — por isso nem a tabela nem as barras ganham fundo,
   borda ou raio proprios. Elas se separam por BORDA e por respiro.
   ────────────────────────────────────────────────────────────────────────── */

/* ─── A tabela que substituiu os quatro graficos "por unidade" ─────────────── */

#master-rede-tabela { width: 100%; overflow-x: auto; }

table.mrede {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.mrede th,
table.mrede td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line, #e8ede1);
  text-align: left;
  white-space: nowrap;
}

table.mrede th {
  padding: 0;                       /* o padding vive no botao, que e o alvo de clique */
  background: none;                 /* o cabecalho de tabela do portal vem com degrade */
  border-bottom: 1px solid var(--line, #e8ede1);
}

table.mrede td.num,
table.mrede th.num .mrede-sort { text-align: right; justify-content: flex-end; }
table.mrede td.num { font-variant-numeric: tabular-nums; }

/* O cabecalho e um botao: ordenar pelo teclado tem de ser possivel, e o kit
   pede que a tabela "ordene por qualquer coluna". */
.mrede-sort {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 9px 12px;
  background: none; border: 0;
  font: inherit; font-weight: 700;
  font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--text-muted, #5b6250);
  cursor: pointer;
}
.mrede-sort:hover { color: var(--primary, #394820); }
.mrede-sort.is-on { color: var(--primary, #394820); }
.mrede-seta { font-size: 9px; line-height: 1; }

table.mrede tbody tr:hover td { background: var(--field-bg, #f7f9f4); }
table.mrede tbody tr:last-child td { border-bottom: 0; }

.mrede-vazio { color: var(--text-muted, #5b6250); text-align: center; padding: 22px 12px; }

/* Risco e ESTADO: cor sozinha nunca carrega a informacao — o rotulo vai junto. */
.mrede-risco {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; font-style: normal; white-space: nowrap;
}
.mrede-risco.is-ok   { background: #e7f2ea; color: #17694a; }
.mrede-risco.is-warn { background: #fbf0dc; color: #8a5e10; }
.mrede-risco.is-bad  { background: #fbe6e9; color: #b3202f; }
.mrede-risco.is-neu  { background: var(--field-bg, #f7f9f4); color: var(--text-muted, #5b6250); }

/* ─── Parte do todo: barra empilhada unica ────────────────────────────────── */

.mpartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;                        /* 22px = entre blocos de assunto diferente */
}

.mparte { min-width: 0; }
.mparte h4 { margin: 0; font-size: 13.5px; font-weight: 700; }
.mparte-sub {
  margin: 2px 0 12px;
  font-size: 11.5px;
  color: var(--text-muted, #5b6250);
}
.mparte-vazio { font-size: 12px; color: var(--text-muted, #5b6250); margin: 0; }

.mparte-barra {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--field-bg, #f7f9f4);
}
/* 2px de superficie entre segmentos: sem isso duas fatias vizinhas de tom
   parecido viram uma so. */
.mparte-barra > span + span { box-shadow: -2px 0 0 0 var(--surface, #fff); }

.mparte-leg {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;                         /* 4px = entre selo e selo */
}
.mparte-leg li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
}
.mparte-leg i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mparte-leg span { color: var(--text-muted, #5b6250); }
/* O numero fica a direita e legivel: e ele que da o alivio exigido pelo dourado,
   que sozinho nao alcanca 3:1 contra a superficie. */
.mparte-leg b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ─── Os quatro graficos que ficaram ──────────────────────────────────────── */

.master-chart-box > .mchart-sub {
  margin: 2px 0 10px;
  font-size: 11.5px;
  color: var(--text-muted, #5b6250);
}