/* Capital Humano · Thelsa — botones, pills, estado, capacidad. */

  .btn { font-family: inherit; font-size: 13px; font-weight: 500; padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  .btn-primary { background: var(--brand); color: #fff; }
  .btn-primary:hover { background: var(--brand-soft); }
  .btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
  .btn-secondary:hover { background: var(--bg-subtle); }
  .btn-warn { background: var(--warn); color: #fff; }
  .btn-danger { background: transparent; color: var(--err); }
  .btn-danger:hover { background: var(--err-bg); }
  .btn-sm { padding: 5px 10px; font-size: 12px; }
  .btn:disabled { opacity: 0.5; cursor: not-allowed; }

  .pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
  .pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
  .pill.ok { background: var(--ok-bg); color: var(--ok); }
  .pill.warn { background: var(--warn-bg); color: var(--warn); }
  .pill.err { background: var(--err-bg); color: var(--err); }
  .pill.info { background: var(--info-bg); color: var(--info); }
  .pill.neutral { background: var(--line-soft); color: var(--ink-soft); }

  .status-banner { margin-top: 16px; padding: 13px 16px; border-radius: var(--r-md); border-left: 3px solid; }
  .status-banner.ok { background: var(--ok-bg); border-left-color: var(--ok); color: var(--ok); }
  .status-banner.warn { background: var(--warn-bg); border-left-color: var(--warn); color: var(--warn); }
  .status-banner.err { background: var(--err-bg); border-left-color: var(--err); color: var(--err); }
  .status-banner.neutral { background: var(--bg-subtle); border-left-color: var(--line); color: var(--ink-soft); }
  .status-banner-title { font-weight: 600; font-size: 13px; }
  .status-banner-detail { font-size: 12px; margin-top: 3px; }

  .capacity-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 12px; padding: 12px; background: var(--bg-subtle); border-radius: var(--r-md); border: 1px solid var(--line-soft); }
  .cap-cell { display: flex; flex-direction: column; gap: 3px; }
  .cap-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 600; }
  .cap-value { font-family: 'Geist Mono', monospace; font-size: 14px; font-weight: 500; }