.live { display: inline-flex; align-items: center; gap: 7px; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--live); }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: nb-live 2.4s steps(8, end) infinite; }

/* Ficha técnica: la información estructurada de una pieza */
.spec { border-radius: 16px; border: 1px solid var(--line); overflow: hidden; background: color-mix(in srgb, var(--card) 70%, transparent); }
.spec-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 11px 14px; border-top: 1px solid var(--hair); font-size: 13.5px; line-height: 1.6; }
.spec-row:first-child { border-top: 0; }
.spec-key { font: 600 10px/1.8 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.spec-val { min-width: 0; color: var(--text); }
.spec-val strong { color: var(--strong); }
.spec-val ul { margin: 0; padding-left: 16px; display: grid; gap: 3px; }
.spec-val ul.metric-list,
.spec-val ul.bp-vocab { display: flex; padding-left: 0; gap: 6px; }
.metric-list,
.link-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.metric { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 9px; font-size: 12px; font-weight: 600; color: var(--strong); background: color-mix(in srgb, var(--mint) 10%, transparent); border: 1px solid color-mix(in srgb, var(--mint) 26%, transparent); }
.metric i { color: var(--live); font-size: 10.5px; }
.link-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text); background: var(--hair); border: 1px solid var(--line-2); transition: all .28s var(--ease); }
button.link-chip:hover,
button.link-chip:focus-visible { color: var(--strong); border-color: var(--accent); background: color-mix(in srgb, var(--sky) 10%, transparent); }
.link-chip i { font-size: 10.5px; color: var(--accent); }
.trace-note { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.6; background: color-mix(in srgb, var(--amber) 7%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent); }
.trace-note i { color: var(--amber-text); margin-top: 3px; }
.trace-note strong { color: var(--strong); }
.honest { font-size: 12px; line-height: 1.6; color: var(--muted); }
@media (max-width: 720px) {
  .spec-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
.trace-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.trace-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.trace-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--hair); transition: all .28s var(--ease); }
.trace-steps li:hover { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 7%, transparent); }
.trace-steps .step-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 11px; color: #06223F; background: var(--amber); }
.trace-steps b { display: block; font-size: 13.5px; color: var(--strong); }
.trace-steps small { display: block; font-size: 12px; color: var(--text); line-height: 1.5; }
.metric-rows { display: grid; gap: 8px; }
.metric-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--hair); }
.metric-row b { display: block; color: var(--strong); font-size: 14.5px; margin-bottom: 4px; }
.metric-row .metric-list { margin-top: 6px; }
.metric-row small { display: block; }
.equiv { margin-top: 8px; display: grid; gap: 6px; }
.equiv .mono { font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.sheet { border-radius: 16px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--card) 80%, transparent); overflow: hidden; }
.sheet > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--navy); color: #fff; font-size: 12px; }
.sheet > header .mono { font-size: 10px; letter-spacing: .1em; opacity: .8; }
.sheet-block { display: grid; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--hair); }
.sheet-block > .mono { font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.sheet-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 0; border-bottom: 1px dotted var(--line); }
.sheet-line small { display: block; font-size: 11px; color: var(--muted); }
.sheet-line b { font: 600 12.5px/1.2 var(--mono); color: var(--strong); white-space: nowrap; }
.sheet-total { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 10px; background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; margin-top: 4px; }
.sheet-total b { font-family: var(--mono); }
.sheet > footer { padding: 10px 16px; font: 600 10px/1.4 var(--mono); letter-spacing: .08em; color: var(--amber-text); border-top: 1px solid var(--hair); }
.bp-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bp-flow span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--line-2); font-size: 13px; font-weight: 650; color: var(--strong); }
.bp-flow b { font: 700 11px/1 var(--mono); color: var(--accent); }
.bp-flow small { font-size: 11px; font-weight: 500; color: var(--muted); }

/* Ficha de pieza (la usan la landing, el creador y sus paneles) */
.piece-kind { display: inline-block; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--kc, var(--accent)); }
.detail-desc { font-size: 14px; line-height: 1.65; color: var(--text); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }