/* Orbita — Hi-fi design tokens (supplements style.css + components.css)
   Only classes NOT already in style.css or components.css.
   Shell layout (.app, .sidebar, .main) lives in style.css.
   Buttons, cards, chips, badges, checks live in components.css. */

/* Topbar: defined in components.css.
   h1 defaults to system-ui via style.css h1 rule.
   Sections that want serif (Hábitos) add .h-serif explicitly. */
.topbar .date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--t3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ─── MONO LABEL ──────────────────────────────── */
.label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--t3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ─── SERIF HELPER ────────────────────────────── */
.h-serif {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--t1);
}

/* ─── SCALE 1-5 (unique to Hi-Fi) ─────────────── */
.scale {
  display: inline-flex;
  gap: 4px;
}
.scale .n {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--b2);
  background: var(--sf);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--t2);
  cursor: pointer;
  transition: all 0.12s;
}
.scale .n:hover { border-color: var(--t3); }
.scale .n.g1 { border-color: var(--danger); color: var(--danger); }
.scale .n.g2 { border-color: #D9692A; color: #D9692A; }
.scale .n.g3 { border-color: var(--warn); color: var(--warn); }
.scale .n.g4 { border-color: #7A8F24; color: #7A8F24; }
.scale .n.g5 { border-color: var(--ok); color: var(--ok); }
.scale .n.sel {
  color: white;
  transform: scale(1.05);
}
.scale .n.g1.sel { background: var(--danger); }
.scale .n.g2.sel { background: #D9692A; }
.scale .n.g3.sel { background: var(--warn); }
.scale .n.g4.sel { background: #7A8F24; }
.scale .n.g5.sel { background: var(--ok); }

/* ─── TRAFFIC DOT PULSE (supplements components.css .tdot) ── */
.tdot.pulse { background: var(--danger); animation: pulse 1.4s infinite; }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.45); }
  50% { box-shadow: 0 0 0 6px rgba(192,57,43,0); }
}

/* ─── CARD VARIANTS (supplements components.css .card) ── */
.card.elev {
  border-color: var(--b2);
  box-shadow: var(--shadow-sm);
}
.card.soft { background: var(--sf2); }
.card.accent {
  border-color: var(--ac-b);
  background: linear-gradient(180deg, rgba(124,58,237,0.03), transparent 40%), var(--sf);
}

/* ─── SEPARATORS ──────────────────────────────── */
hr.sep {
  border: none;
  border-top: 1px solid var(--b);
  margin: 12px 0;
}
hr.sep.dashed { border-top-style: dashed; border-color: var(--b2); }