/* Shared component vocabulary — one definition for the vanilla app and the CRM
   island. Linked raw by index.html and @imported by crm-app/src/theme.css.
   Uses semantic tokens present on both surfaces (the CRM aliases them in theme.css). */

/* ── Buttons ── base + variant, e.g. class="btn btn-primary" ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s, opacity .15s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; pointer-events: none; }
.btn-primary { background: var(--accent); color: oklch(100% 0 0); }
.btn-primary:hover:not(:disabled) { background: color-mix(in oklch, var(--accent) 65%, oklch(100% 0 0)); transform: translateY(-1px); box-shadow: 0 8px 24px color-mix(in oklch, var(--accent) 30%, transparent); }
.btn-ghost { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover:not(:disabled) { background: var(--border); }
.btn-danger { background: color-mix(in oklch, var(--red) 12%, transparent); color: var(--red); border: 1px solid color-mix(in oklch, var(--red) 30%, transparent); }
.btn-danger:hover:not(:disabled) { background: color-mix(in oklch, var(--red) 22%, transparent); }
.btn-sm { padding: 4px 9px; font-size: 12px; }

/* ── Tabs (pill) ── un solo vocabulario para tabs de contenido/filtros.
   Mismo look que .board-tab (gantt); perfil y filtros de docs migrados aquí. ── */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  padding: 7px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface2); font-size: 13px; font-weight: 500;
  cursor: pointer; color: var(--muted); font-family: var(--font-display);
  transition: background .15s, color .15s, border-color .15s;
}
.tab:hover { color: var(--text); border-color: var(--accent); }
.tab.active { background: var(--accent); color: oklch(100% 0 0); border-color: var(--accent); }