/* ============================================================
   PULSO — CSS de composición de los primitivos.
   Solo maquetación: colores, tamaños y radios vienen de tokens.css.
   Las clases base (.card .track .band .dot .cap .mono .num,
   [data-estado], [data-nivel]) están en tokens.css.
   ============================================================ */

/* ---- Ring ------------------------------------------------------------- */
/* Fluido: nunca excede su contenedor; el número escala con el anillo
   (container queries) pero no pasa del token a tamaño completo. */
.ring { position: relative; container-type: inline-size;
        width: min(var(--ring-size, 170px), 100%); aspect-ratio: 1; margin-inline: auto; }
.ring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.ring .ring-bg { fill: none; stroke: var(--ring-track); stroke-width: var(--ring-w); }
.ring .ring-fg {
  fill: none; stroke-width: var(--ring-w); stroke-linecap: round;
  stroke: var(--nivel);                         /* familia 'rec': color por nivel */
  animation: ring-fill .85s var(--ease) both;   /* rellena desde vacío, sin depender de JS/rAF */
}
@keyframes ring-fill { from { stroke-dashoffset: var(--ring-c); } }
.ring.familia-strain .ring-fg { stroke: var(--strain); }
.ring.familia-sleep  .ring-fg { stroke: var(--sleep); }
.ring .ring-c {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-1);
}
.ring .ring-n { font-size: min(var(--fs-ring), 42cqw); line-height: 1; letter-spacing: var(--ls-tighter); }
.ring .ring-lb { color: var(--dim); }

/* ---- MetricRow ------------------------------------------------------- */
.metric-row { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft); }
.metric-row:last-child { border-bottom: 0; }
.mr-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.mr-name { font-size: var(--fs-label); font-weight: var(--fw-semi); }
.mr-val { font-size: var(--fs-value); }
.mr-val u { text-decoration: none; font-size: var(--fs-cap); font-weight: var(--fw-reg); color: var(--dim); }
/* El valor se tiñe cuando la constante está fuera de lo óptimo (medio/bajo);
   en rango (alto) o sin base (neutro) queda en tinta normal. */
.metric-row[data-nivel="medio"] .mr-val,
.metric-row[data-nivel="bajo"] .mr-val { color: var(--nivel); }
.metric-row .band { margin-top: var(--sp-2); }
.mr-prov { display: block; margin-top: var(--sp-2); }

/* ---- ContributorBar -------------------------------------------------- */
.cbar { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-soft); }
.cbar:last-child { border-bottom: 0; }
.cb-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-2); }
.cb-name { font-size: var(--fs-label); font-weight: var(--fw-semi); }
.cb-val { font-size: var(--fs-value); letter-spacing: var(--ls-tight); }
.cb-val.up { color: var(--rec); }
.cb-val.dn { color: var(--rec-low); }
.cbar .track u { background: var(--nivel); }
.cbar .cb-mid { position: absolute; left: 50%; top: -3px; width: 1px; height: var(--h-pin); background: var(--line-strong); }
.cb-prov { display: block; margin-top: var(--sp-2); }

/* ---- SourcePill ------------------------------------------------------ */
.source-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-pill);
  white-space: nowrap;            /* nunca partir en dos líneas */
  min-width: 0;
}
.source-pill .dot { flex: none; }
.source-pill .sp-name { font-size: var(--fs-meta); font-weight: var(--fw-med); color: var(--ink); }
.source-pill .sp-sync { color: var(--faint); }
.source-pill[data-estado="ok"] .sp-sync { color: var(--dim); }
.source-pill[data-estado="obsoleto"] .sp-sync { color: var(--warn); }