/*
 * DONUT — rosca em SVG puro (sem lib JS). Trilho de fundo + segmentos via
 * stroke-dasharray. Texto central com total + rótulo. Cores por tom.
 */
.donut {
  display: block;
  width: 100%;
  height: auto;
}

.donut__track {
  stroke: color-mix(in srgb, var(--color-status-neutral) 22%, transparent);
  stroke-width: 5;
}

.donut__seg {
  stroke-width: 5;
}

.donut__seg--accent  { stroke: var(--color-accent); }
.donut__seg--neutral { stroke: var(--color-status-neutral); }
.donut__seg--success { stroke: var(--color-success); }
.donut__seg--warning { stroke: var(--color-warning); }

.donut__value {
  fill: var(--color-text);
  font-size: 7px;
  font-weight: var(--weight-semibold);
  text-anchor: middle;
}

.donut__label {
  fill: var(--color-text-muted);
  font-size: 3px;
  text-anchor: middle;
}