/* =====================================================================
   cth-dashboard.css — gráficos da aba Dashboard
   Consome a rampa --sev-* definida no :root de styles.css.
   Grade de 6 colunas; cada viewBox é dimensionado para a largura real do
   seu card (cth-dashboard.js, vbOf), para a escala ficar ~1:1.
   ===================================================================== */
.dash{
  display:grid; gap:16px; grid-template-columns:1fr;
  max-width:1416px; margin:0 auto;
}
@media (min-width:1080px){
  .dash{grid-template-columns:repeat(6, 1fr)}
  .dcard[data-kind="wide"]{grid-column:1 / -1}
  .dcard[data-kind="half"]{grid-column:span 3}
  .dcard[data-kind="twothirds"]{grid-column:span 4}
  .dcard[data-kind="third"]{grid-column:span 2}
}

.dash{--d-card:rgba(2,17,30,.62);
      --d-ink:#E4EEF6; --d-mut:#8AA2B8; --d-dim:#5F7689;
      --d-line:rgba(120,190,255,.10); --d-acc:var(--sev-accent)}

.dash{--sem-critical:#D92626; --sem-high:#ED5A5F; --sem-medium:#E2A050;
      --sem-low:#6086C7;      --sem-info:#B2B8BD}
.dcard[data-id="crit"] .dmetric b{color:var(--sem-critical)}
.dcard[data-id="crit"] .dsvg{max-width:428px; margin-inline:auto}

.dcard{
  position:relative; overflow:hidden; border-radius:12px;
  background:var(--d-card); border:1px solid var(--d-line);
  padding:15px 16px 16px;
}
.dhd{display:flex; align-items:flex-start; gap:14px; margin-bottom:10px}
.dtx{min-width:0; flex:1}
.dhd h3{
  margin:0; font-size:0.875rem; font-weight:600; letter-spacing:.01em; color:var(--d-ink);
}
.dhd .dsub{
  margin-top:4px; font-size:0.71875rem; line-height:1.4; color:var(--d-mut);
  display:flex; align-items:center; gap:4px 14px; flex-wrap:wrap;
}
.dmetric{flex:0 0 auto; text-align:right; line-height:1}
.dmetric b{
  display:block; font-family:var(--font-mono, ui-monospace, monospace);
  font-size:1.3125rem; font-weight:600; color:var(--d-acc); letter-spacing:-.02em;
}
.dmetric span{
  display:block; margin-top:3px; font-size:0.5625rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--d-dim);
}
.dsvg{display:block; width:100%; height:auto; overflow:visible}


/* eixos e rótulos dentro do SVG */
.dgrid{stroke:var(--d-line); stroke-width:1}
.dax{font-size:0.625rem; fill:var(--d-dim); font-family:var(--font-mono, ui-monospace, monospace)}
.dlbl{font-size:0.71875rem; fill:var(--d-ink)}
.drank{font-size:0.625rem; fill:var(--d-dim); font-family:var(--font-mono, ui-monospace, monospace)}
.dtrack{stroke:var(--d-line); stroke-width:5; stroke-linecap:round}
.drod{stroke:var(--sev-accent); stroke-width:5; stroke-linecap:round; opacity:.6}
.ddot{fill:var(--sev-accent)}
.dnum{font-size:0.6875rem; fill:var(--d-mut); font-family:var(--font-mono, ui-monospace, monospace)}

.ddnum{font-size:1.375rem; font-weight:600; fill:var(--d-ink); letter-spacing:-.02em;
       font-family:var(--font-mono, ui-monospace, monospace)}
.ddsub{font-size:0.5rem; letter-spacing:.16em; fill:var(--d-dim)}
.dlgl{font-size:0.6875rem; fill:var(--d-mut)}
.dlgn{font-size:0.75rem; font-weight:600; fill:var(--d-ink);
      font-family:var(--font-mono, ui-monospace, monospace)}

/* legenda de severidade */
.dleg{display:flex; flex-wrap:wrap; gap:4px 8px; margin:2px 0 9px}
/* estática: só nomeia as cores */
.dtog{
  display:inline-flex; align-items:center; gap:6px;
  font:inherit; font-size:0.6875rem; color:var(--d-mut);
  padding:3px 8px 3px 6px; border-radius:999px;
  border:1px solid transparent; background:none;
}
.dtog i{
  width:10px; height:10px; border-radius:2px; flex:0 0 10px;
  border:1px solid transparent; opacity:1;
}
.dempty{
  margin:0; padding:34px 0; text-align:center; font-size:0.75rem; color:var(--d-dim);
}

@media (max-width:520px){
  .dcard{padding:15px 14px 16px}
  .dhd{flex-direction:column; gap:10px}
  .dmetric{text-align:left}
  .dmetric b{font-size:1.3125rem}
}