/* ---------- UI kit: ring, status, chips, waffle, KPI breakdown, data states ----------
   Tokens with fallbacks so the kit works in any edition. One state = one colour everywhere;
   state always comes with an icon and a word. Grey for context, the accent only for the focus. */
:root {
  --ok: #1f8a4c;
  --ok-soft: rgb(47 191 122 / 0.16);
  --warn: #9a5b00;
  --warn-soft: rgb(250 162 27 / 0.2);
  --bad: #b3201f;
  --bad-soft: rgb(255 90 82 / 0.15);
  --info: #2c5a9a;
  --info-soft: rgb(58 134 200 / 0.15);
  --neutral: #4c5059;
  --neutral-soft: rgb(76 80 89 / 0.12);
}
.kit-icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* KPI row of the kit: four tiles, the focus one breaks the pattern (scale + accent). */
.kit-kpis > div {
  display: grid;
  align-content: center;
  min-height: 132px;
  transition:
    transform var(--t-med, 0.2s) ease,
    box-shadow var(--t-med, 0.2s) ease;
}
.kit-kpis > .is-focus {
  /* Emphasis by a ring, never by scaling: a scaled tile covers its neighbour (S29). */
  box-shadow:
    var(--raised, none),
    0 0 0 2px var(--accent, #f5b335);
}

/* Status indicator (traffic light). */
.kit-status {
  display: grid;
  gap: 4px;
}
.kit-status > span {
  color: var(--hud-muted);
}
.kit-status b {
  font-size: var(--fs-3, 28px);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.kit-status b small {
  font-size: 13px;
  font-weight: 500;
  color: var(--hud-muted);
}
.kit-status em {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-self: start;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-style: normal;
  font-weight: 700;
}
.kit-status em small {
  font-weight: 500;
}
.kit-status[data-level='normal'] em {
  background: var(--ok-soft);
  color: var(--ok);
}
.kit-status[data-level='alerta'] em {
  background: var(--warn-soft);
  color: var(--warn);
}
.kit-status[data-level='critico'] em {
  background: var(--bad-soft);
  color: var(--bad);
}

/* Progress ring: figure in the centre. */
.kit-ring {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 4px 13px;
  align-items: center;
  margin: 0;
}
.kit-ring svg {
  width: 76px;
  height: 76px;
  transform: rotate(-90deg);
}
.kit-ring circle {
  fill: none;
  stroke-width: 5;
}
.kit-ring .track {
  stroke: var(--surface-sunk, #e3e8eb);
}
.kit-ring .fill {
  stroke: var(--hud-muted);
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s var(--ease, ease);
}
.kit-ring.is-focus .fill {
  stroke: var(--accent);
}
.kit-ring b {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.kit-ring figcaption {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--hud-muted);
}
.kit-ring figcaption small {
  display: block;
  color: var(--hud-text);
  font-weight: 700;
  font-size: 15px;
}

/* KPI with breakdown: segmented bar, 2px gaps, legend with values. */
.kit-breakdown {
  display: grid;
  gap: 6px;
}
.kit-breakdown > span {
  color: var(--hud-muted);
}
.kit-breakdown > b {
  font-size: var(--fs-3, 28px);
  line-height: 1.05;
}
.kit-breakdown > b small {
  font-size: 13px;
  font-weight: 500;
  color: var(--hud-muted);
}
.seg-bar {
  display: flex;
  gap: 2px;
  height: 10px;
}
.seg-part {
  width: var(--w);
  min-width: 3px;
  border-radius: 3px;
  background: var(--c);
}
.kit-breakdown ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 13px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}
.kit-breakdown li {
  display: flex;
  gap: 5px;
  align-items: center;
  color: var(--hud-muted);
}
.kit-breakdown li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--c);
}
.kit-breakdown li b {
  color: var(--hud-text);
}

/* Inside the KPI row the shared ".kpis b/span/small" sizes must not reach the kit internals. */
.kpis.kit-kpis > div {
  aspect-ratio: auto;
  min-height: 140px;
  padding: 13px 16px;
}
.kpis.kit-kpis :is(.kit-ring b, .kit-breakdown li b, .kit-status em, .kit-ring figcaption small) {
  font-size: 15px;
  line-height: 1.2;
}
.kpis.kit-kpis .kit-ring b {
  font-size: 17px;
}
.kpis.kit-kpis :is(.kit-status > b, .kit-breakdown > b) {
  font-size: var(--fs-3, 28px);
}
.kit-ring svg,
.kit-ring b {
  grid-area: 1 / 1 / 3 / 2;
}
.kit-ring b {
  place-self: center;
}