/* ============================================================
   MinerOS Hub — Dashboard "terminal" (panel.html)
   Aditivo. Eleva el board de stats a estética Bloomberg/TradingView:
   números monoespaciados tabulares, indicadores de cambio ▲/▼ en vivo
   y flash de color al actualizar. Scopeado bajo .stat-grid.term para
   no afectar .stat en ningún otro lugar.
   ============================================================ */

/* barra de estado del board */
.term-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:26px;padding:10px 16px;background:var(--bg-2);border:1px solid var(--border);
  border-radius:12px;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--text-muted)}
.term-bar .tb-left{display:flex;align-items:center;gap:10px;text-transform:uppercase}
.term-bar .tb-live{display:inline-flex;align-items:center;gap:7px;color:var(--green)}
.term-bar .tb-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(90,209,138,.5);animation:pulse 2s infinite}
.term-bar .tb-src{color:var(--text-muted)}
.term-bar .tb-right{display:flex;align-items:center;gap:9px}
.term-bar .tb-clock{color:var(--text-2);font-variant-numeric:tabular-nums}
.term-bar .tb-legend{display:inline-flex;gap:10px}
.term-bar .tb-legend b{font-weight:700}
.term-bar .tb-legend .up{color:var(--green)}
.term-bar .tb-legend .dn{color:var(--red,#e8637a)}

/* board: rejilla más densa */
.stat-grid.term{gap:10px;margin-top:10px}
.stat-grid.term .stat{
  padding:16px 16px 15px;border-radius:12px;
  background:linear-gradient(180deg,var(--card),var(--bg-2));
  display:flex;flex-direction:column;min-height:104px}
.stat-grid.term .stat:hover{transform:translateY(-2px)}
/* barra de acento a la izquierda en las métricas clave */
.stat-grid.term .stat.gold{border-color:var(--border-gold)}
.stat-grid.term .stat.gold::after{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;
  border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--gold),var(--gold-2))}
.stat-grid.term .stat .s-label{font-size:.6rem;letter-spacing:.11em;margin-bottom:auto}
.stat-grid.term .stat .s-val{
  font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(1.35rem,2.1vw,1.8rem);letter-spacing:-.01em;margin-top:12px;
  transition:color .2s var(--ease)}
/* chip de cambio ▲/▼ */
.s-delta{position:absolute;top:14px;right:14px;display:none;align-items:center;gap:3px;
  font-family:var(--mono);font-size:.66rem;font-weight:700;font-variant-numeric:tabular-nums;
  padding:3px 7px;border-radius:999px;line-height:1}
.s-delta.show{display:inline-flex}
.s-delta.up{color:var(--green);background:rgba(90,209,138,.12)}
.s-delta.dn{color:var(--red,#e8637a);background:rgba(232,99,122,.12)}
.s-delta .sd-arrow{font-size:.62rem}
/* flash al actualizar el valor */
@media (prefers-reduced-motion: no-preference){
  .s-val.flash-up{animation:sflashUp .7s var(--ease)}
  .s-val.flash-dn{animation:sflashDn .7s var(--ease)}
}
@keyframes sflashUp{0%{color:var(--green)}100%{}}
@keyframes sflashDn{0%{color:var(--red,#e8637a)}100%{}}

@media(max-width:520px){
  .term-bar{font-size:.64rem;padding:9px 12px}
  .term-bar .tb-legend{display:none}
}