/* Resumo compacto da aba IA: grade do DESIGN-SYSTEM-SUPERADMIN §3 (260px, gap 12). */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.cartao {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--access-border);
  border-radius: 12px;
  background: var(--access-panel);
}

.identidade {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.identidade strong {
  color: var(--access-text);
  font-size: 15px;
}

.conta {
  justify-self: start;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--access-border);
  border-radius: 999px;
  background: var(--access-panel);
  overflow: hidden;
  color: var(--access-text);
  font: 700 12px var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.corpo {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.anel {
  display: block;
  width: 64px;
  height: 64px;
  flex: none;
}

.anelFundo {
  fill: none;
  stroke: var(--access-border);
  stroke-width: 6;
}

.anelValor {
  fill: none;
  stroke: var(--access-context);
  stroke-width: 6;
  stroke-linecap: round;
}

.cartao[data-nivel="atencao"] .anelValor { stroke: var(--access-warn); }
.cartao[data-nivel="critico"] .anelValor { stroke: var(--access-bad); }

.anelTexto {
  fill: var(--access-text);
  font: 800 14px var(--font-mono);
}

.anelLegenda {
  fill: var(--access-muted);
  font: 600 8px var(--font-mono);
}

.janelas {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--access-muted);
  font-size: 12px;
  line-height: 1.45;
}

.janelas span {
  color: var(--access-text);
  font-weight: 700;
}

.rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font-size: 12px;
}

.semaforo {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--access-text);
}

.semaforo i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--access-muted);
}

.semaforo[data-nivel="baixo"] i { background: var(--access-ok); }
.semaforo[data-nivel="atencao"] i { background: var(--access-warn); }
.semaforo[data-nivel="critico"] i { background: var(--access-bad); }

.estado {
  color: var(--access-muted);
}

.tendencia {
  display: block;
  width: 96px;
  height: 26px;
}

.tendencia polyline {
  fill: none;
  stroke: var(--access-context);
  stroke-width: 2;
}

.semTendencia,
.carregando {
  color: var(--access-muted);
  font-size: 13px;
}